Question

我想使用悬停，以便奇数div上的底部边框与#75dcff的颜色不同。但是，.card:hover div:nth-child(odd)不起作用。我可以将psuedo类应用于nth-child元素吗？

＆＃13;

.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;
}

＆＃13;

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

＆＃13;

Answer 1

您的选择器不正确。 .card:hover div:nth-child(odd)正在选择作为.card的后代的奇数索引div，但您的结构表明这些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>

使用CSS将伪类添加到nth-child

1 个答案: