如何選擇某個類的第一次出現

Supoose您有類似如何選擇某個類的第一次出現

<div class="base"> 
    <div> 
     ... 
      <div class="ok"> 
       <div> 
        ... 
         <div class="ok"></div> 
        ... 
       </div> 
      </div> 
     ... 
    </div>  
</div>

在這裏，我只是出一對夫婦的DIV的，但它可以是任何深層次（注意...）

所以問題是：如何不知道它的嵌套深度，我如何設計類ok的第一個元素？

這裏是一個DEMO中，你可以看到我的所有樣式的DIV與類ok

來源

2016-07-12 Jeanluca Scaljeri

是你的div全部嵌套，還是有一些兄弟姐妹？ –

存在的，沒有選擇，但覆蓋的解決方法：你可以申請一些CSS所有.ok然後重置所有嵌套.ok

div { 
 
    margin: 5px; 
 
    padding: 5px; 
 
    border: 1px solid green; 
 
    background-color: #fff; 
 
} 
 

 
.ok { 
 
    background-color: gray; 
 
} 
 
.ok .ok{ 
 
    background-color: #fff; 
 
}

<div> 
 
    ... 
 
    <div class="ok"> 
 
    ... 
 
    <div class="ok"> 
 
     ... 
 
     <div class="ok"> 
 
     ... 
 
     <div> 
 
      ... 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-07-12 14:51:09

這個假設除了「第一個」之外，所有屬於該類成員的元素都將是「第一個」的後代。問題中的例子就是如此，但不清楚這是否是普遍的情況。 – Quentin

是真的，我們會問 –

在我的具體情況下，我需要首先設置'ok'而不是嵌套更深的部分，這意味着這適用於我:) –

CSS沒有提供的功能來選擇基於任何出現在其開始標記後的文檔中的元素。不是後代，不是後來的兄弟姐妹，也不是後代的祖先兄弟姐妹。

您需要爲此使用JavaScript。沿着線的東西：

document.addEventListener("DOMContentLoaded", function(event) { 
    document.querySelector(".ok").classList.add("ok-first"); 
});

來源

2016-07-12 14:46:57 Quentin

如何選擇某個類的第一次出現

回答

相關問題