在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