Question

使用CSS，我想选择特定类的奇怪孩子。例如在下面的html中，我想选择包含“Child B 1”和“Child B 3”的div：

<div class="parent">
  <div class="child a">
    Child A
  </div>
  <div class="child b">
    Child B 1
  </div>
  <div class="child b">
    Child B 2
  </div>
  <div class="child b">
    Child B 3
  </div>
</div>

我试过了

.parent .b:nth-of-type(odd) {
  color:blue;
}

和

.parent .b:nth-child(odd) {
  color:blue;
}

但是这两个都选择“Child B 2”，因为它是带有b类的父类的奇数子项。

这可能吗？如果是这样，那么适当的CSS选择器是什么？

Answer 1

非常接近

见下面的例子还有https://www.w3.org/Style/Examples/007/evenodd.en.html

＆＃13;

.parent :nth-child(even) {
  color:blue;
}

＆＃13;

<div class="parent">
  <div class="child a">
    Child A
  </div>
  <div class="child b">
    Child B 1
  </div>
  <div class="child b">
    Child B 2
  </div>
  <div class="child b">
    Child B 3
  </div>
</div>

＆＃13;

Answer 2

简短的回答是，仅靠CSS就无法做到这一点。如果你添加JavaScript或jQuery，它可以很容易地完成。在这里查看更详细的答案：

Select nth-child across multiple parents

Answer 3

就像他说here一样，你不能单靠css这样做。

我建议那么，你是如何动态创建这些元素的，每隔一个添加一个类，然后在css中选择该类并将属性应用于它

＆＃13;

CopyTo

＆＃13;

div.parent > div.child.b.odd {
  color: blue;
}

＆＃13;

选择具有特定班级的奇数孩子

3 个答案: