Question

我有以下div：

<div class="c">
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>//this
</div>
<div class="c">
  <div class="a"></div>//this
  <div class="a"></div>//this
  <div class="a"></div>
</div>
<div class="c">
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
</div>

是否有CSS选择器可以让我选择位于.a匹配结果的第3，第4和第5位的.a元素？

类似于jQuery中的eq()。

：nth-child（）在这里没有帮助，因为这只是一个简化的案例。

This is a fiddle使用jQuery获得结果。我想知道是否有使用CSS的解决方案。

Answer 1

不，在CSS中没有与jQuery的:eq()相当的东西。简单来说，第n个元素没有选择器匹配复杂的选择器（在你的例子中，第3，第4和第5个元素匹配选择器.a）。

仅仅为了完整性（因为有人会说"well, actually..."），具体的元素当然可以通过

获得

.c:nth-child(1) > .a:nth-child(3), .c:nth-child(2) > .a:nth-child(1), .c:nth-child(2) > .a:nth-child(2)

但是假设完全你的标记出现的方式，这很少是一个现实的假设，特别是如果页面是动态生成的。

在非常不可能的情况下，您的标记是静态的，并且您可以依赖第3，第4和第5 .a元素位于这些确切位置，无论如何都要使用上面的选择器。但是如果他们的位置或结构可能不同，那么你需要其他方法在CSS中识别它们，例如使用额外的类名。

Answer 2

.c:nth-child(1) .a:nth-child(3) { background:yellow; }
.c:nth-child(2) .a:nth-child(2), .c:nth-child(2) .a:nth-child(1) { background:yellow; }

<div class="c">
  <div class="a">c1-a1</div>
  <div class="a">c1-a2</div>
  <div class="a">c1-a3 //this</div>
</div>
<div class="c">
  <div class="a">c2-a1 //this</div>
  <div class="a">c2-a2 //this</div>
  <div class="a">c2-a3</div>
</div>
<div class="c">
  <div class="a">c3-a1</div>
  <div class="a">c3-a2</div>
  <div class="a">c3-a3</div>
</div>

用于匹配类的特定位置的CSS选择器

2 个答案: