Question

我正在尝试通过索引或迭代来定位一个类元素（在DOM中出现多次），严格使用CSS。

我知道实现此目的的几种不同方法：我可以在一个数组中抛出元素并检索所述元素的特定索引（Javascript）。我可以用#ID标记我想要定位的元素。我可以通过指定属性（.element[href="link"]）来优化目标元素。伪类:first-child和:last-child仅针对该（父）元素的子元素（Duh！）。

示例：我的DOM中有.class出现5次，我想影响该.class元素的 3rd 迭代的CSS属性。

我希望有一个伪类.element:index-3.那里可能有一些让你这样做的东西。

Answer 1

如果我理解正确，您希望使用“Me！”内容为元素设置样式。在这个例子中：

<body>
  <p>Not me.</p>
  <p class="me">Not me.</p>
  <div><p class="me">Not me.</p></div>
  <p class="me">Me!</p>
  <div><div><p class="me">Not me.</p></div></div>
  <p class="me">Not me.</p>
</body>

~~这应该是可能的~~在某些情况下（见下文），可以使用伪类:nth-of-type：

.me:nth-of-type(3) {color:red;}

正如ScottS在评论中指出的那样，只有当所有类都使用相同的元素类型时才可以这样做（例如p）。

Answer 2

我的DOM中出现了.class 5次，我想影响.class元素的第3次迭代的CSS属性。

我将其视为“在整个DOM中使用.class的目标第三元素”，例如：

<h1 class="class">...</h1>                    #1
<div>
  <ul class="class">                          #2
    <li>...</li>
    <li class="class">...</li>                #3, target this one!
    <li>...</li>
  </ul>
  <div class="class">...</div>                #4
</div>
<p class="class">...</div>                    #5

任何:nth-伪类符号表示由符合特定条件的{em>兄弟的数量限定的元素（:nth-child(an+b) has an+b-1 siblings before it等）。

CSS规范（包括selectors level 4 draft）没有提供在兄弟上下文之外通过索引限定元素的方法（即，只能遍历单个节点，而不是整个DOM树）。这背后有一个性能原因（遍历DOM很难，想象异步内容更新，这不是渲染引擎的工作原理）;但是:nth-element-ever(3)之类的东西也是非常非常任意的标准，并且通过引入另一个类来更好地定位，这意味着完全它的作用，最好是在代码生成。

Answer 3

如果元素不是作为相邻的兄弟元素放置，或者至少放在相同的“范围”（容器元素）中，则无法找到存在，迭代或实际上没有关于“相关”元素的信息。

你最好的投篮要么使用非常难看的解决方案，基于假设元素是兄弟姐妹，这可能是这样的：li.class：first-child + li + li {color：black;找到第三次迭代，

或者只是使用一些JS来计算实例的出现并将其作为特殊类插入，例如“gimme-css-here”。

在CSS中，是否可以定位由索引号标识的类属性？

3 个答案: