用CSS将伪类添加到nth-child [英] Add pseudo class to nth-child with CSS
本文介绍了用CSS将伪类添加到nth-child的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用悬停,以便奇数div的底部边框与#75dcff
不同。但是, .card:hover div:nth-child(odd)
不起作用。我可以将psuedo类应用于n-child元素吗?
.card {margin :30px; padding:20px 40px 40px; max-width:500px; text-align:left;背景:#fff; border-bottom:4px solid #ccc; border:0; border-radius:6px;} card:hover {border-color:#75dcff;}。card:hover div:nth-child(odd){border-color:#ff7c5e;}
pre> < div class =card>< / div>< div class = < / div>< / 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;背景:#fff; border-bottom:4px solid #ccc; border:0; 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>
b $ b
I want to use hover so that the bottom border on odd divs is a different color from #75dcff
. However, .card:hover div:nth-child(odd)
does not work. Can I apply psuedo classes to nth-child elements?
.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>
解决方案
Your selector is incorrect. .card:hover div:nth-child(odd)
is selecting odd-indexed divs that are decendants of a .card
, but your structure suggests that these should be the same thing. Adjust your selector to match the odd elements on hover:
.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>
这篇关于用CSS将伪类添加到nth-child的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文