Wie verhindere ich die CSS-Vererbung?

Ich habe ein hierarchisches Navigationsmenü in meiner Seitenleiste, das verschachtelte Listen (<ul> und <li> Tags) verwendet. Ich verwende ein vorgefertigtes Thema, das bereits Stile für Listenelemente enthält, aber ich möchte den Stil für die Elemente der obersten Ebene ändern, aber NICHT auf die Unterelemente anwenden. Gibt es eine einfache Möglichkeit, Stile auf das Listenelement-Tag der obersten Ebene anzuwenden, ohne dass diese Stile auf die untergeordneten Listenelemente herunterkaskadiert werden? Ich verstehe, dass ich den Unterelementen explizit überschreibende Stile hinzufügen kann, aber ich möchte wirklich vermeiden, dass der gesamte Stilcode dupliziert werden muss, wenn es eine einfache Möglichkeit gibt, einfach zu sagen: "Wenden Sie diese Stile auf diese Klasse an und kaskadieren Sie NICHT." sie bis auf Kinderelemente ". Hier ist das HTML, das ich benutze:

<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>

Das CSS hat also Stile für #sidebar ulund #sidebar ul libereits, aber ich möchte zusätzliche Stile hinzufügen #sidebar .top-level-nav, die NICHT auf seine untergeordneten Elemente übertragen werden. Gibt es eine Möglichkeit, dies einfach zu tun, oder muss ich alle Stile neu anordnen, damit die Stile, die aktiviert waren, #sidebar uljetzt für bestimmte Klassen spezifisch sind?

Bis jetzt gibt es keine übergeordneten Selektoren (oder wie Shaun Inman sie nennt, qualifizierte Selektoren ), daher müssen Sie Stile auf die untergeordneten Listenelemente anwenden, um die Stile auf den übergeordneten Listenelementen zu überschreiben.

Cascading ist sozusagen der springende Punkt bei Cascading Style Sheets, daher der Name.

Sie verwenden entweder die untergeordnete Auswahl

Also mit

#parent > child

Lässt nur die Kinder der ersten Ebene die Stile anwenden. Leider unterstützt IE6 die untergeordnete Auswahl nicht.

Ansonsten können Sie verwenden

#parent child child

Festlegen eines anderen spezifischen Stils für Kinder, die mehr als eine Ebene darunter liegen.

allIm CSS3-Vererbungsmodul wird eine Eigenschaft aufgerufen . Es funktioniert so:

#sidebar ul li {
  all: initial;
}

Ab 2016-12 unterstützen alle Browser außer IE / Edge und Opera Mini diese Eigenschaft.

Mit dem Selektor * können Sie die untergeordneten Stile auf den Standardwert zurücksetzen

Beispiel

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

#parent * {
    white-space: initial;
}

Das Umschließen mit iframe macht das übergeordnete CSS überflüssig.

Die kurze Antwort lautet: Nein, die CSS-Vererbung kann nicht verhindert werden. Sie können nur die Stile überschreiben, die für die übergeordneten Elemente festgelegt wurden. Siehe die Spezifikation:

Jedes Element in einem HTML-Dokument erbt alle vererbbaren Eigenschaften von seinem übergeordneten Element mit Ausnahme des Stammelements ( html), das kein übergeordnetes Element hat. - W3C

Abgesehen davon, dass jede einzelne geerbte Eigenschaft überschrieben wird. Sie können auch initialSchlüsselwörter verwenden, z color: initial;. Es kann auch zusammen mit allz. B. verwendet all: initial;werden, um alle Eigenschaften auf einmal zurückzusetzen. Beispiel:

.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>

Browser-Support-Tabellen gemäß Kann ich verwenden ...

• all (Derzeit keine Unterstützung in IE und Edge, andere sind gut)
• initial (Derzeit keine Unterstützung im IE, andere sind gut)

In einigen Fällen kann es hilfreich sein, die direkte Kinderauswahl zu> verwenden. Beispiel:

.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>

Der Rahmenstil wurde nur auf die direkten untergeordneten <li>s angewendet , ebenso borderwie eine nicht vererbte Eigenschaft. Die Textfarbe wurde jedoch auf alle untergeordneten Elemente angewendet, ebenso colorwie eine geerbte Eigenschaft.

Daher >wäre der Selektor nur bei nicht vererbten Eigenschaften nützlich, wenn es darum geht, die Vererbung zu verhindern.

Sie könnten so etwas wie jQuery verwenden, um dieses Verhalten zu "deaktivieren", obwohl ich kaum denke, dass es eine gute Lösung ist, da Sie die Anzeigelogik in CSS und Javascript erhalten. Abhängig von Ihren Anforderungen können Sie jedoch feststellen, dass die CSS-Dienstprogramme von jQuery Ihnen das Leben leichter machen als das Ausprobieren von hackigem CSS, insbesondere wenn Sie versuchen, es für IE6 zum Laufen zu bringen

Zum Beispiel, wenn Sie zwei div im XHTML-Dokument haben.

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

Versuchen Sie dies dann in CSS.

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

betreffen nur 'div2' Absatz.

#div1 > p {
    color: red;
} 

betrifft nur den Absatz 'div1'.

Sie benötigen keine Klassenreferenz für das lis. Anstatt CSS wie zu haben

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

Du kannst schreiben

ul#sidebar > li { color:black; }

Dadurch wird das Styling nur auf lis angewendet, die unmittelbar von der Seitenleiste absteigen ul.

Setzen Sie sie einfach in der Auswahl "#sidebar ul li" auf ihre Standardeinstellungen zurück