我使用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/