为什么我的锚点在点击时不会显得凹陷？

Question

我正在参加编码课程，我们正在制作一个带有可点击链接的导航栏。问题是我的根本不起作用。我添加了位置：相对；顶部：0；这样按钮在单击后会向下移动，并且在单击链接后也会删除框阴影。它似乎没有做任何事情。有谁知道可能是什么问题？抱歉，如果我的问题没有任何意义。

body {
  margin: 10%;
  font-family: Tahoma, Verdana, Geneva, sans-serif;
}

nav {
  overflow: hidden;
  width: 43%;
  margin: 0 auto;
  padding-bottom: 1em;
}

nav ul {
  list-style-type: none;
  /* Step 2: Remove bullets */
}

nav ul li {
  float: left;
  /* Step 3: Float li's left to line up horizontally */
}


/* Psuedoclass Class Selectors - State of links LVHA */

nav a:link {
  /* Default state of link */
  display: block;
  /* Step 4: Gives anchor tag structure */
  width: 6em;
  /* Increases width of links and makes all buttons a standard width */
  border: 2px solid rgb(175, 175, 175);
  text-align: center;
  text-decoration: none;
  padding: .5em 1em;
  /* Gives breathing room between content and inside of border */
  margin: 0 5px;
  border-radius: 6px;
  background-color: rgb(190, 190, 190);
  color: white;
  text-shadow: #666 .1em .1em .1em;
  /* Color, right, bottom, blur */
  box-shadow: rgba(0, 0, 0, .5) 0 5px 3px;
  /* Color, right, bototm, blur */
  /* Sets position of each button to relative and sets positions to zero */
  position: relative;
  top: 0;
}

nav a:visited {
  border: 2px solid rgb(175, 175, 175);
  color: white;
}

nav a:hover {
  background-color: #fdca00;
  border-color: #fda700;
}

nav a:active a:focus {
  /* Moves button 3px down and removes shadow on click */
  top: 3px;
  box-shadow: rgba(0, 0, 0, .5) 0 0 0;
}

<nav>
  <ul>
    <li><a href="#">Men</a></li>
    <li><a href="#">Women</a></li>
    <li><a href="#">Kids</a></li>
    <li><a href="#">SALE</a></li>
  </ul>
</nav>

Answer 1

问题出在这个选择器上：nav a:active a:focus

它转换为一个锚元素，其焦点位于导航元素内活动的锚元素内。你不想要这样。您需要一个包含两个单独的选择器的列表，这两个选择器都源自 nav 元素：

nav a:active, nav a:focus {}

这解决了元素的活动（当前正在单击）和聚焦（尚未选择其他元素）状态。

body {
  margin: 10%;
  font-family: Tahoma, Verdana, Geneva, sans-serif;
}

nav {
  overflow: hidden;
  width: 43%;
  margin: 0 auto;
  padding-bottom: 1em;
}

nav ul {
  list-style-type: none;
  /* Step 2: Remove bullets */
}

nav ul li {
  float: left;
  /* Step 3: Float li's left to line up horizontally */
}


/* Psuedoclass Class Selectors - State of links LVHA */

nav a:link {
  /* Default state of link */
  display: block;
  /* Step 4: Gives anchor tag structure */
  width: 6em;
  /* Increases width of links and makes all buttons a standard width */
  border: 2px solid rgb(175, 175, 175);
  text-align: center;
  text-decoration: none;
  padding: .5em 1em;
  /* Gives breathing room between content and inside of border */
  margin: 0 5px;
  border-radius: 6px;
  background-color: rgb(190, 190, 190);
  color: white;
  text-shadow: #666 .1em .1em .1em;
  /* Color, right, bottom, blur */
  box-shadow: rgba(0, 0, 0, .5) 0 5px 3px;
  /* Color, right, bototm, blur */
  /* Sets position of each button to relative and sets positions to zero */
  position: relative;
  top: 0;
}

nav a:visited {
  border: 2px solid rgb(175, 175, 175);
  color: white;
}

nav a:hover {
  background-color: #fdca00;
  border-color: #fda700;
}

nav a:active, nav a:focus {
  /* Moves button 3px down and removes shadow on click */
  top: 3px;
  box-shadow: rgba(0, 0, 0, .5) 0 0 0;
}

<nav>
  <ul>
    <li><a href="#">Men</a></li>
    <li><a href="#">Women</a></li>
    <li><a href="#">Kids</a></li>
    <li><a href="#">SALE</a></li>
  </ul>
</nav>