CSS-Negations-Pseudoklasse :not() für übergeordnete/vorfahrende Elemente

Lesezeit: 3 Minuten

CSS Negations Pseudoklasse not fur ubergeordnetevorfahrende Elemente
Karl

Das macht mich wahnsinnig:

HTML:

<div><h1>Hello World!</h1></div>

CSS:

*:not(div) h1 { color: #900; }

Heißt das nicht: „Alles auswählen h1 Elemente, die einen Vorfahren haben, der kein a ist div element…?” Somit sollte “Hello World!” nicht rot eingefärbt werden, ist es aber trotzdem.

Für das obige Markup funktioniert das Hinzufügen des untergeordneten Kombinators:

*:not(div) > h1 { color: #900; }

Beeinflusst das aber nicht h1 Element, wenn es kein Kind von a ist div Element. Zum Beispiel:

<div><article><h1>Hello World!</h1></article></div>

Deshalb möchte ich darauf hinweisen h1 Element als Nachkomme, nicht als Kind des div Element. Jeder?

  • Nebenbei bemerkt, sobald Sie eine andere Art von Auswahl verwenden, können Sie die sofort löschen *dh :not(div)genau wie Sie angeben .class oder #id ohne das *.

    – BoltClock

    16. August 2011 um 20:00 Uhr

CSS Negations Pseudoklasse not fur ubergeordnetevorfahrende Elemente
BoltClock

Heißt das nicht: „Alles auswählen h1 Elemente, die einen Vorfahren haben, der kein a ist div Element…?”

Es tut. Aber in einem typischen HTML-Dokument jeden h1 hat mindestens zwei Vorfahren, die es nicht sind div Elemente – und diese Vorfahren sind nichts anderes als body und html.

Dies ist das Problem beim Versuch, Vorfahren zu filtern :not(): es funktioniert einfach nicht zuverlässig, besonders wenn die :not() nicht durch einen anderen Selektor qualifiziert wird, wie z. B. einen Typselektor oder einen Klassenselektor, z .foo:not(div). Sie werden es viel einfacher haben, Stile einfach auf alle anzuwenden h1 Elemente und überschreibt sie mit div h1.

Im Selektoren 4, :not() wurde erweitert, um vollständige komplexe Selektoren zu akzeptieren, die Kombinatoren enthalten, einschließlich des Nachkomme-Kombinators. Ob dies im Fast-Profil (und damit CSS) implementiert wird, muss noch getestet und bestätigt werden, aber sobald es implementiert ist, dann Sie Wille Sie können damit Elemente mit bestimmten Vorfahren ausschließen. Aufgrund der Funktionsweise von Selektoren muss die Negation für das Element selbst und nicht für den Vorfahren durchgeführt werden, um zuverlässig zu funktionieren, und daher sieht die Syntax etwas anders aus:

h1:not(div h1) { color: #900; }

Wer sich mit jQuery auskennt, wird schnell darauf hinweisen Dieser Selektor funktioniert heute in jQuery. Dies ist einer von mehreren Unterschieden zwischen Selector 3 :not() und jQuerys :not()die Selektoren 4 zu korrigieren versucht.

  • Gibt es eine Lösung, um so etwas mit Selectors Level 3 zu tun?

    – Alexandre D.

    3. März 2017 um 7:47 Uhr

  • @Alexandre D.: Wenn es so wäre, hätte ich es erwähnt. Das Beste, was Sie tun können, ist, wie gesagt, “Stile auf alle h1-Elemente anzuwenden und sie mit div h1 zu überschreiben”.

    – BoltClock

    3. März 2017 um 8:05 Uhr

1646318529 263 CSS Negations Pseudoklasse not fur ubergeordnetevorfahrende Elemente
Richie Hindle

Die <html> Element ist nicht a <div>. Die <body> Element ist nicht a <div>.

Die Bedingung „hat einen Vorfahren, der kein a ist <div>” gilt für alle Elemente.

Es sei denn, Sie können die verwenden > (Kinder-)Selektor, ich glaube nicht, dass Sie das tun können, was Sie versuchen zu tun – es macht keinen Sinn. In deinem zweiten Beispiel <article> ist kein div, also passt das *:not(div) zu.

  • “alle Elemente” außer html Da es sich natürlich um ein Root-Element handelt, spielt es hier keine Rolle 🙂

    – BoltClock

    16. August 2011 um 20:10 Uhr

924420cookie-checkCSS-Negations-Pseudoklasse :not() für übergeordnete/vorfahrende Elemente

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy