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

Question

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

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

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

我希望有一个.element:index-3.的伪类.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

我的.class在我的DOM中出现了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) 在其之前有an+b-1兄弟姐妹，等等）。

CSS规范（包括选择器级别4的草稿）没有提供通过同级上下文之外的索引来限定元素的方法（即，只能遍历单个节点，而不是整个DOM树）。 这背后有一个性能原因（遍历DOM很难，想象一下异步内容更新，这不是渲染引擎的工作原理）； 但类似:nth-element-ever(3)这样的标准将是一个非常非常任意的标准，并且通过引入另一个类（它确切地表示其作用，最好在代码生成期间）引入更好的针对性。

Answer 3

如果没有将元素放置为相邻的兄弟姐妹，或者没有放置在相同的“作用域”（容器元素）中，则无法找到“相关”元素的存在，迭代或什至没有任何东西。

基于元素是兄弟姐妹的假设，您最好的选择是使用非常丑陋的解决方案，如下所示：li.class：first-child + li + li {color：black; }找到第三次迭代，

或者只是使用一些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