使用 CSS 向 nth-child 添加伪类答案

【问题标题】：Add pseudo class to nth-child with CSS使用 CSS 向 nth-child 添加伪类
【发布时间】：2018-06-13 13:02:35
【问题描述】：

我想使用悬停，以便奇数 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:nth-child(odd):hover吗？编辑：见@chazsolo's answer:o)

标签： html css css-selectors pseudo-class

【解决方案1】：

您的选择器不正确。 .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>

【讨论】：