Question

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

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

完整演示：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您必须将其应用于锚点（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中的伪选择器

1 个答案: