Jak mogę zapobiec dziedziczeniu CSS?

Mam hierarchiczne menu nawigacyjne na pasku bocznym, które używa zagnieżdżonych list (znaczniki <ul> i <li>). Używam gotowego motywu, który ma już style dla elementów listy, ale chcę zmienić styl elementów najwyższego poziomu, ale NIE chcę, aby był on stosowany do elementów podrzędnych. Czy istnieje łatwy sposób na zastosowanie stylów do znacznika elementu listy najwyższego poziomu BEZ stosowania tych stylów kaskadowo w dół do elementów listy podrzędnej? Rozumiem, że mogę jawnie dodać nadpisujące style do elementów podrzędnych, ale naprawdę chciałbym uniknąć konieczności powielania całego kodu stylu, jeśli istnieje łatwy sposób, aby po prostu powiedzieć „zastosuj te style do tej klasy i NIE KODUJ kaskadowo aż do elementów podrzędnych ”. Oto kod HTML, którego używam:

<ul id="sidebar">
  <li class="top-level-nav">
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li class="top-level-nav">
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

Tak więc CSS ma style dla #sidebar uli #sidebar ul lijuż, ale chciałbym dodać do nich dodatkowe style #sidebar .top-level-nav, które NIE są kaskadowane do jego pod-dzieci. Czy istnieje sposób, aby to zrobić po prostu, czy też muszę zmienić rozmieszczenie wszystkich stylów, aby style, które były włączone, #sidebar ulbyły teraz specyficzne dla określonych klas?

Na razie nie ma selektorów nadrzędnych (lub, jak nazywa je Shaun Inman , selektorami kwalifikowanymi ), więc będziesz musiał zastosować style do elementów listy podrzędnej, aby zastąpić style z elementów listy nadrzędnej.

Kaskadowanie to w pewnym sensie sedno Kaskadowych Arkuszy Stylów, stąd nazwa.

Możesz użyć selektora podrzędnego

Więc używając

#parent > child

Tylko dzieci pierwszego poziomu będą miały zastosowane style. Niestety IE6 nie obsługuje selektora podrzędnego.

W przeciwnym razie możesz użyć

#parent child child

Aby ustawić inny określony styl dla dzieci, które są o więcej niż jeden poziom niżej.

Istnieje właściwość nazywana allw module dziedziczenia CSS3 . Działa to tak:

#sidebar ul li {
  all: initial;
}

Od 2016-12 wszystkie przeglądarki oprócz IE / Edge i Opera Mini obsługują tę właściwość.

Możesz użyć selektora *, aby zmienić style potomne z powrotem na domyślne

przykład

#parent {
    white-space: pre-wrap;
}

#parent * {
    white-space: initial;
}

Zawijanie za pomocą iframe sprawia, że ​​nadrzędny CSS jest przestarzały.

Krótka odpowiedź brzmi: nie, nie można zapobiec dziedziczeniu CSS. Możesz zastąpić tylko style ustawione dla rodziców. Zobacz specyfikację:

Każdy element w dokumencie HTML odziedziczy wszystkie dziedziczone właściwości po swoim rodzicu z wyjątkiem elementu głównego ( html), który nie ma elementu nadrzędnego. - W3C

Oprócz nadpisywania każdej dziedziczonej właściwości. Możesz również użyć initialsłowa kluczowego, np color: initial;. Może być również używany razem z all, na przykład all: initial;, który zresetuje wszystkie właściwości jednocześnie. Przykład:

.container {
  color: blue;
  font-style: italic;
}
.initial {
  all: initial;
}

<div class="container">
  The quick brown <span class="initial">fox</span> jumps over the lazy dog
</div>

Tabele obsługi przeglądarek według Czy mogę użyć ...

• all (Obecnie brak wsparcia w IE i Edge, inne są dobre)
• initial (Obecnie brak wsparcia w IE, inne są dobre)

W niektórych przypadkach może się to przydać, używając bezpośredniego selektora dzieci> . Przykład:

.list > li {
  border: 1px solid red;
  color: blue;
}

<ul class="list">
  <li>
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li>
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

Styl obramowania został zastosowany tylko do bezpośrednich elementów potomnych <li>, podobnie jak borderwłaściwość niedziedziczona. Ale kolor tekstu został zastosowany do wszystkich elementów podrzędnych, podobnie jak colordziedziczona właściwość.

Dlatego >selector byłby przydatny tylko w przypadku niedziedziczonych właściwości, jeśli chodzi o zapobieganie dziedziczeniu.

Możesz użyć czegoś takiego jak jQuery, aby „wyłączyć” to zachowanie, chociaż nie sądzę, żeby było to dobre rozwiązanie, ponieważ logika wyświetlania jest dostępna w css i javascript. Mimo to, w zależności od twoich wymagań, możesz zauważyć, że narzędzia css jQuery ułatwiają ci życie niż próbowanie hacky css, zwłaszcza jeśli próbujesz sprawić, by działał w IE6

Na przykład, jeśli masz dwa elementy div w dokumencie XHTML.

<div id='div1'>
    <p>hello, how are you?</p>
    <div id='div2'>
        <p>I am fine, thank you.</p>
    </div>
</div>

Następnie spróbuj tego w CSS.

#div1 > #div2 > p{
    color: red;
}

dotyczą tylko akapitu „div2”.

#div1 > p {
    color: red;
} 

dotyczą tylko paragrafu „div1”.

Nie potrzebujesz odwołania do klasy dla lis. Zamiast mieć CSS jak

li.top-level-nav { color:black; }

Możesz pisać

ul#sidebar > li { color:black; }

Spowoduje to zastosowanie stylizacji tylko do tych, liktóre natychmiast schodzą z paska bocznego ul.

po prostu przywróć je do ich wartości domyślnych w selektorze "#sidebar ul li"