html - HTML中的伪选择器 | HTML中的伪选择器

我仅使用nth-child(odd)伪类将颜色添加到备用列表项中，但是我不知道为什么颜色显示在边框JSFiddle之外。

header li:nth-child(odd){
    background-color:cyan;
}

完整演示：

header li {
  list-style: none;
}
a:link, a:visited {
  text-decoration: none;
  background-color: blue;
  display: block;
  border: 1px solid blue;
  color: black;
  width: 150px;
  margin-bottom: 1px;
  text-align: center;
}
a:hover, a:active {
  background-color: deeppink;
  color: purple;
}
header li:nth-child(odd) {
  background-color: cyan;
}

<header>
  <h1>This is simple demonstration of different ways of using Pseudo-Selectors</h1>
  <ol>
    <li><a href="https://www.facebook.com/" target="_blank">Sambar</a>
    </li>
    <li><a href="https://www.facebook.com/" target="_blank">Idli</a>
    </li>
    <li><a href="https://www.facebook.com/" target="_blank">Mysore Bonda</a>
    </li>
    <li><a href="https://www.facebook.com/" target="_blank">Cashew Bonda</a>
    </li>
    <li><a href="https://www.facebook.com/" target="_blank">Pesarattu Upma</a>
    </li>
    <li><a href="https://www.facebook.com/" target="_blank">Cornflakes</a>
    </li>
    <li><a href="https://www.facebook.com/" target="_blank">Thai curry</a>
    </li>
    <li><a href="https://www.facebook.com/" target="_blank">Parmesan Garlic</a>
    </li>
    <li><a href="https://www.facebook.com/" target="_blank">Honey BBQ</a>
    </li>
    <li><a href="https://www.facebook.com/" target="_blank">Pappu Charu</a>
    </li>
  </ol>
</header>

最佳答案

您必须将其应用于anchor（a）元素：

header li:nth-child(odd) a {
  background-color: cyan;
}

header li {
  list-style: none;
}
a:link,
a:visited {
  text-decoration: none;
  background-color: blue;
  display: block;
  border: 1px solid blue;
  color: black;
  width: 150px;
  margin-bottom: 1px;
  text-align: center;
}
a:hover,
a:active {
  background-color: deeppink;
  color: purple;
}
header li:nth-child(odd) a {
  background-color: cyan;
}

<title>Pseudo-Selectors</title>

<body>
  <header>
    <h1>This is simple demonstration of different ways of using Pseudo-Selectors</h1>
    <ol>

      <li><a href="https://www.facebook.com/" target="_blank">Sambar</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Idli</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Mysore Bonda</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Cashew Bonda</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Pesarattu Upma</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Cornflakes</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Thai curry</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Parmesan Garlic</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Honey BBQ</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Pappu Charu</a>
      </li>
    </ol>
  </header>
</body>

关于html - HTML中的伪选择器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40272510/