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

Question

I'm trying to target a class element (appearing more than once in the DOM) by its index or iteration, strictly using CSS. 我正在尝试严格使用CSS通过索引或迭代来定位一个类元素（在DOM中多次出现）。

I know of several different ways of achieving this: I could toss the element(s) in an array and retrieve a specific index of said element (Javascript). 我知道实现此目的的几种不同方法：我可以将元素扔到数组中并检索该元素的特定索引（Javascript）。 I could label the element I'm trying to target with an #ID. 我可以使用#ID标记要尝试定位的元素。 I could refine the targeted element by specifying an attribute ( .element[href="link"] ). 我可以通过指定属性（ .element[href="link"] ）来优化目标元素。 The pseudo-class :first-child and :last-child only target the children of that (parent) element (Duh!). 伪类:first-child和:last-child只针对那个（父）元素（Duh！）的孩子。

Example: I have a .class appearing 5 times within my DOM and I want to affect the CSS properties of the 3rd iteration of that .class element. 示例：我的DOM中有一个.class出现5次，并且我想影响该.class元素的第3次迭代的CSS属性。

I wish there was a pseudo-class of .element:index-3. 我希望有一个.element:index-3.的伪类.element:index-3. There's probably something out there that let's you do just that. 可能有些东西可以让您做到这一点。

Answer 1

If I understand you correctly, you want to style the element with the content "Me!" 如果我对您的理解正确，那么您希望使用内容“ Me！”为元素设置样式。 in this example: 在此示例中：

<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>

~~This should be possible~~ In some cases (see below) it is possible with the pseudo-class :nth-of-type : 在某些情况下， ~~这应该是可能的~~ （请参阅下文），可以使用伪类:nth-of-type ：

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

As ScottS noted in the comments, this is only possible if all classes are on the same element type (eg p ). 正如ScottS在评论中指出的那样，只有当所有类都在相同的元素类型（例如p ）上时才有可能。

Answer 2

I have a .class appearing 5 times within my DOM and I want to affect the CSS properties of the 3rd iteration of that .class element. 我的.class在我的DOM中出现了5次，我想影响该.class元素的第三次迭代的CSS属性。

I'm reading this as "target third element that uses .class across the entire DOM", eg: 我将其读取为“在整个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

Any :nth- pseudo-class notation represents an element qualified by the number of siblings matching a certain criteria ( :nth-child(an+b) has an+b-1 siblings before it etc.). 任何:nth-伪类表示法都表示一个元素，该元素由与特定条件匹配的兄弟姐妹数量限定（ :nth-child(an+b) 在其之前有an+b-1兄弟姐妹，等等）。

CSS specification (including selectors level 4 draft ) does not provide means of qualifying elements by index outside of sibling context (ie only individual nodes can be traversed, not the entire DOM tree). CSS规范（包括选择器级别4的草稿）没有提供通过同级上下文之外的索引来限定元素的方法（即，只能遍历单个节点，而不是整个DOM树）。 There is a performance reason behind this (traversing DOM is tough, imagine async content update, this is not how rendering engines work); 这背后有一个性能原因（遍历DOM很难，想象一下异步内容更新，这不是渲染引擎的工作原理）； but also something like :nth-element-ever(3) would be a very, very arbitrary criteria and would be better targeted by introduction of another class that means exactly what it does, preferably during code generation. 但类似:nth-element-ever(3)这样的标准将是一个非常非常任意的标准，并且通过引入另一个类（它确切地表示其作用，最好在代码生成期间）引入更好的针对性。

Answer 3

If the elements are not placed as adjacent siblings, or at least in the same "scope" (container element), there's no way for you to find out existence, iteration, or actually nothing about "related" elements. 如果没有将元素放置为相邻的兄弟姐妹，或者没有放置在相同的“作用域”（容器元素）中，则无法找到“相关”元素的存在，迭代或什至没有任何东西。

Your best shot is either use a very ugly solution, based on the assumption the elements are siblings, which might look like so: li.class:first-child + li + li { color: black; 基于元素是兄弟姐妹的假设，您最好的选择是使用非常丑陋的解决方案，如下所示：li.class：first-child + li + li {color：black; } to find the 3rd iteration, }找到第三次迭代，

or just use some JS to calculate occurance of an instace and insert it as a special class, like "gimme-css-here". 或者只是使用一些JS来计算实例的出现并将其作为特殊类插入，例如“ gimme-css-here”。

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

问题描述

3 个解决方案

解决方案1
3 2012-10-28 00:03:24

解决方案2
2 2012-10-28 02:09:34

解决方案3
0 2012-10-28 00:50:22

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

问题描述

3 个解决方案

解决方案1 3 2012-10-28 00:03:24

解决方案2 2 2012-10-28 02:09:34

解决方案3 0 2012-10-28 00:50:22

解决方案1
3 2012-10-28 00:03:24

解决方案2
2 2012-10-28 02:09:34

解决方案3
0 2012-10-28 00:50:22