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

【问题标题】：In CSS, is it possible to target class property identified by index number?在 CSS 中，是否可以定位由索引号标识的类属性？
【发布时间】：2012-10-17 18:59:32
【问题描述】：

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

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

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

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

【问题讨论】：

我找到了一个非常好的列表，列出了您可以定位元素的所有变体。我已经知道其中的 90%，但确实有一些令人大开眼界。 link
您应该将此作为答案发布。 div.class:nth-of-type(3) 应该可以完美解决问题。
嗯。我在我链接的网站上看到了它，所以我试了一下。显然它只会影响目标元素的文本。

标签： javascript html css dom css-selectors

【解决方案1】：

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

<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 在 cmets 中指出的那样，这只有在所有类都在同一元素类型上时才有可能（例如 p）。

【讨论】：

此解决方案失败：nth-of-type 实际上并没有查看和计算类，而是元素的 type。所以.me:nth-of-type(3) 在您的示例中仅针对正确的p，因为它是div 正下方的第三个p 元素并且它有一个.me 类。 This fiddle 表明在没有 .me 类的情况下引入另一个 p 会导致选择器失败。
@ScottS：啊，我不知道。谢谢（你的）信息。我在答案中更新了它。
对不起，伙计们。你提到的一切对我来说都是新的，也不是我想要的解决方案。我将尝试改写这个问题：考虑一下……（我将引用一个数组，但只是比喻，而不是语法）假设我有一个包含 5 个对象的数组。我想选择数组中的第三个对象，而不管与所述对象相关的任何兄弟。我只想定位对象的第三个实例。不是按类型、不是按属性、不是按子项等。
@JustinWard——一个“数组”意味着按顺序连续个类似类型的对象。这真的是你的 DOM 的样子吗？这些像li 元素在DOM 中是否都彼此相邻？或者你是否寻找第三个实例，无论它是否与同一对象的其他实例连续？
我说的正是我的意思。五个单独的
元素，每个部分都属于同一类。我想通过索引号来定位其中一个 div。不是第一个也不是最后一个。不引用它的孩子。

【解决方案2】：

我的 DOM 中有一个 .class 出现 5 次，我想影响该 .class 元素的第三次迭代的 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- 伪类表示法都表示由符合特定条件（:nth-child(an+b)has an+b-1 siblings before it 等）的兄弟数量限定的元素。

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

【讨论】：

是的。我不认为这是可能的。我只是好奇......这些论坛上似乎有一些受过良好教育的头脑，所以我想我会试一试。我可以毫无问题地将 ID 附加到元素并以这种方式更精确地定位它。我只是想找到一种替代方法。

【解决方案3】：

如果元素没有被放置为相邻的兄弟元素，或者至少在相同的“范围”（容器元素）中，那么您将无法找出“相关”元素的存在、迭代或实际上什么都没有。

您最好的方法是使用非常丑陋的解决方案，基于元素是兄弟元素的假设，可能看起来像这样： li.class:first-child + li + li { color: black; } 找到第三次迭代，

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

【讨论】：