CSS Controlling Cascade

Question

Zbudowałem edytor do użytku przez użytkowników, ma on paletę stylów do wyboru, w tym przykładzie będziemy je nazywać .p1 i `.p2 '. Problem polega na tym, że nadpisują się nawzajem w zależności od kolejności, w jakiej pojawiają się w arkuszu stylów.

Nie mogę znaleźć sposobu, który to rozwiąże, ponieważ nie wiem, jak te panele mogą być zagnieżdżone.

Ten przykład jest znacznie uproszczony i nie mogę kontrolować dokładnie, gdzie znajdują się elementy takie jak tag, mogą one być zagnieżdżone w tabelach, listach, akapitach lub dowolnych innych znacznikach na dowolnej głębokości. Byłoby to również zastosowanie do nagłówków i innych elementów podrzędnych, które potrzebują tam styl niestandardowy (np H1, ul ...), aby dobrze wyglądać w kontekście faktu, że jest on pokazany w.

.p1 a { 
 
    color: red; 
 
} 
 
.p2 a { 
 
    color: green; 
 
}

<div class="pl p2"> 
 
    <a href="#">Hello 2</a> 
 
    <div class="pl p1"> 
 
    <a href="#">Hello 2-1</a> 
 
    <div class="pl p2"> 
 
     <a href="#">Hello 2-1-2</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="pl p1"> 
 
    <a href="#">Hello 1</a> 
 
    <div class="pl p2"> 
 
    <a href="#">Hello 1-2</a> 
 
    <div class="pl p1"> 
 
     <a href="#">Hello 1-2-1</a> 
 
    </div> 
 
    </div> 
 
</div>

Grałem z: nie selektorem, a także używając wszystkich: domyślnie, na dzieciach, ale nie miałem szczęścia.

Answer 1

Twój przykład jest trochę mylące, ponieważ ma 2 Ćwiczenia stosowane do tego samego elementu.

Jeśli rozumiem zostanie poprawnie, chcesz, że element jest stylizowany przez najbliższego przodka w DOM.

W takim przypadku rozwiązaniem byłoby ustawienie zestawu reguł, w którym przodkowie, którzy mają jedną z 2 klas, zawsze będą pasować, a więc reguła o najwyższej dokładności wygra ....

Niestety, ale nie mogę znaleźć lepszy sposób to wytłumaczyć ...

.p1 a, 
 
*[class^=p] .p1 a, 
 
*[class^=p] *[class^=p] .p1 a, 
 
*[class^=p] *[class^=p] *[class^=p] .p1 a 
 
{ 
 
\t background-color: antiquewhite; 
 
} 
 

 
.p2 a, 
 
*[class^=p] .p2 a, 
 
*[class^=p] *[class^=p] .p2 a, 
 
*[class^=p] *[class^=p] *[class^=p] .p2 a 
 
{ 
 
\t background-color: lightblue; 
 
}

<div class="p2"> 
 
    <a href="#">Hello 2</a> 
 
    <div class="p1"> 
 
    <a href="#">Hello 2-1</a> 
 
    <div class="p2"> 
 
     <a href="#">Hello 2-1-2</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="p1"> 
 
    <a href="#">Hello 1</a> 
 
    <div class="p2"> 
 
    <a href="#">Hello 1-2</a> 
 
    <div class="p1"> 
 
     <a href="#">Hello 1-2-1</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Wygląda na to, że może to być bezpośredni wybierak dla dzieci >. Dowiedz się więcej o bezpośrednim selektorze podrzędnym on MDN.

żywo Demo:

.p1 > a { 
 
    color: red; 
 
} 
 
.p2 > a { 
 
    color: green; 
 
}

<div class="pl p2"> 
 
    <a href="#">Hello 2</a> 
 
    <div class="pl p1"> 
 
    <a href="#">Hello 2-1</a> 
 
    <div class="pl p2"> 
 
     <a href="#">Hello 2-1-2</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="pl p1"> 
 
    <a href="#">Hello 1</a> 
 
    <div class="pl p2"> 
 
    <a href="#">Hello 1-2</a> 
 
    <div class="pl p1"> 
 
     <a href="#">Hello 1-2-1</a> 
 
    </div> 
 
    </div> 
 
</div>