我想使用悬停,以便奇数div的底部边框是与#75dcff
不同的颜色。但是,.card:hover div:nth-child(odd)
不起作用。我可以将psuedo类应用于nth-child元素吗?
.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)
正在选择奇数索引的div,它们是.card
的后代,但是你的结构表明它们应该是同一个东西。调整选择器以匹配悬停时的奇数元素:
.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>