用CSS将伪类添加到nth-child [英] Add pseudo class to nth-child with CSS

问题描述

我想使用悬停，以便奇数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屋！