我想使用悬停使奇数 div 的底部边框颜色与 #75dcff
不同。但是,.card:hover div:nth-child(odd)
不起作用。我可以将伪类应用于第 n 个子元素吗?
.card {
margin: 30px;
padding: 20px 40px 40px;
max-width: 500px;
text-align: left;
background: #fff;
border-bottom: 4px solid #ccc;
border-radius: 6px;
}
.card:hover {
border-color: #75dcff;
}
.card:hover div:nth-child(odd) {
border-color: #ff7c5e;
}
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
最佳答案
您的选择器不正确。 .card:hover div:nth-child(odd)
正在选择作为 .card
后代的奇数索引 div,但您的结构表明它们应该相同事物。调整您的选择器以匹配悬停时的奇数元素:
.card {
margin: 30px;
padding: 20px 40px 40px;
max-width: 500px;
text-align: left;
background: #fff;
border-bottom: 4px solid #ccc;
border-radius: 6px;
}
.card:hover {
border-color: #75dcff;
}
.card:nth-child(odd):hover {
border-color: #ff7c5e;
}
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
关于html - 使用 CSS 为第 nth-child 添加伪类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48084421/