CSS wählen verschachtelte Elemente bis zu N Ebenen tief

Ich habe eine Reihe von verschachtelten Elementen, und ich versuche nur die ersten N-Ebenen auszuwählen. Die folgende Abbildung zeigt ein funktionierendes Beispiel, in dem ich die ersten 7 Ebenen auswähle und sie style. Das funktioniert genau so, wie ich es möchte, aber ich hatte gehofft, dass es eine vereinfachte Art der Auswahl dieser Elemente gibt.CSS wählen verschachtelte Elemente bis zu N Ebenen tief

In meinem tatsächlichen Anwendungsfall, weiß ich nicht die Gesamtzahl der verschachtelten Elemente, und ich versuche, die ersten 50 Ebenen auszuwählen, so wäre die Verwendung der oben genannten Methode ziemlich chaotisch. Leider kann ich den HTML-Code in meiner Anwendung nicht ändern, daher muss es eine CSS-Methode sein. Vielen Dank.

.container > div, 
 
.container > div > div, 
 
.container > div > div > div, 
 
.container > div > div > div > div, 
 
.container > div > div > div > div > div, 
 
.container > div > div > div > div > div > div, 
 
.container > div > div > div > div > div > div > div { 
 
    border-left: 1px solid; 
 
    padding-left: 15px; 
 
}

<div class="container"> 
 
    <div> 
 
    A 
 
    <div> 
 
     B 
 
     <div> 
 
     C 
 
     <div> 
 
      D 
 
      <div> 
 
      E 
 
      <div> 
 
       F 
 
       <div> 
 
       G 
 
       <div> 
 
        H 
 
        <div> 
 
        I 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-07-26 Steve J

Wollte Sie, dass jedes div innerhalb des 'container' gezielt werden soll? – geeksal

* Ich kann den HTML-Code in meiner Anwendung nicht ändern, also muss es eine CSS-Methode sein * - Es kann auch kein Skript sein? – BSMP

Ok, keine HTML-Änderungen, aber nicht einmal Jquery? Nur mit CSS ist es nicht möglich. Bitte beachten Sie diese Themen http://stackoverflow.com/questions/12206935/is-there-a-css-hschilddrin-selector, http://stackoverflow.com/questions/1014861/is-there-a-css-parent- Selektor? noredirect = 1 & lq = 1, http://stackoverflow.com/questions/36613187/how-to-select-div-without-descendent-li-in-css?noredirect=1&lq=1 –

Dies ist unmöglich, in allen CSS-Versionen bis zu präsentieren und so weit ich weiß, ein Descendant Level Selector, die alle Elemente wählen bis zu einem bestimmten Niveau ist nicht geplant in nächster Zeit umgesetzt werden .

Was können Sie stattdessen tun, um eine Klasse auf alle Elemente gesetzt Sie ausgewählt und Verwendung werden:

.container .class { 
    border-left: 1px solid; 
    padding-left: 15px; 
}

Wenn Sie keine Änderungen in Ihrem HTML machen kann oder benutze JavaScript, dann ist das, was du gerade hast, deine beste Wahl.

Quelle

2016-07-26 17:58:59

CSS wählen verschachtelte Elemente bis zu N Ebenen tief

Antwort

Verwandte Themen