9

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

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

示例：我.class在我的 DOM 中出现了 5 次，我想影响该元素第三次迭代的 CSS 属性。.class

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

4

3 回答 3

4

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

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

于 2012-10-28T00:03:24.340 回答
2

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

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

<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)将是一个非常非常任意的标准，并且通过引入另一个完全意味着它的作用的类会更好地定位，最好是在代码生成期间。

于 2012-10-28T02:09:34.823 回答
0

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

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

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

于 2012-10-28T00:50:22.977 回答