Ich bin verwirrt, warum dieses Beispiel nicht funktioniert:
CSS:
%Vor%HTML:
%Vor% Das Endergebnis ist, dass beide <p> grün sind, aber ich hätte erwartet, dass die erste rot ist. Hier ist ein JSFiddle.
Interessanterweise habe ich drei verschiedene Wege gefunden, es zum Laufen zu bringen:
<div> aus dem HTML <div> in ein anderes Element (z. B. <section> ) div zum Anfang des zweiten CSS-Selektors ( div div:not(.exclude) p ) Und eine andere seltsame Art, es zu brechen:
<div> um das <section>
Laut MDN :
Dieser Selektor gilt nur für ein Element; Sie können damit nicht alle Vorfahren ausschließen. Zum Beispiel gilt
body :not(table) aimmer noch für Links innerhalb einer Tabelle, da<tr>mit dem:not()-Teil des Selektors übereinstimmt.
Das macht Sinn, aber ich glaube nicht, dass dies hier passiert. Da zwischen <div class="exclude"> und seinem direkten Kind <p> nichts ist, sollte die Regel ausgelöst werden, unabhängig davon, was darin verschachtelt ist. Was vermisse ich? Ich würde es wirklich schätzen, wenn mir jemand helfen könnte, das zu verstehen.
Da zwischen
<div class="exclude">und seinem direkten Kind<p>nichts ist, sollte die Regel ausgelöst werden, unabhängig davon, was darin verschachtelt ist. Was vermisse ich?
Das <p> ist ein Nachkomme sowohl der obersten Ebene <div> als auch <div class="exclude"> . Also, während letzteres nicht mit dem Selektor übereinstimmt, macht der erstere, und deshalb haben Sie eine Übereinstimmung. Es spielt auch keine Rolle, dass der Vorgänger, der nicht mit dem Selektor übereinstimmt, näher am <p> ist als der, der das tut.
Lösung 1 und 2 funktionieren, indem Sie diese Übereinstimmung vollständig eliminieren.
Lösung 3 funktioniert, wenn keine anderen <div> s in der Abstammung von <p> vorhanden sind, weil Sie dann Ihren Selektor auf genau diese Kriterien beschränken, in genau dieser Reihenfolge . Das heißt, wenn Sie das Klassenattribut vom inneren <div> zum äußeren tauschen würden, würde es nicht mehr mit dem Selektor übereinstimmen, und umgekehrt, wenn Sie den Klassen Selektor von der inneren div auf die Der Selektor würde nicht mit der ursprünglichen HTML-Struktur übereinstimmen (vorausgesetzt, dass keine anderen <div> s in der Hierarchie vorhanden sind).
Ein weiteres <div> um das <section> herumzulegen bewirkt nur, dass der Selektor wieder von diesem <div> abgeglichen wird. % Co_de% wird ignoriert, ähnlich wie <section> .
Siehe auch:
Sie haben eine überschreibende <div> sogar höher als <div class="exclude"> .
In deinen Styles hast du angegeben, dass - soweit die Pseudo-Klasse :not betroffen ist - jeder Ahnen <div> ausreichen würde. (dh ein Großelternteil <div> ist genauso gut wie ein Elternteil <div> .)
Um sich auf das unmittelbare übergeordnete Element zu konzentrieren, muss Ihr CSS den direkten untergeordneten Selektor ( > ) verwenden:
Sie haben einen gemeinsamen Fehler bei der Verwendung von :not entdeckt, wie auch in den anderen Antworten beschrieben. Der klassische Ansatz in CSS, mit diesem Problem umzugehen, und die Art, wie wir es vor CSS3 getan haben, gab uns die Möglichkeit, uns mit :not in den Fuß zu schießen, heißt mehrere Regeln zu schreiben, einen mit dem allgemeinen Fall, den zweiten mit Ausnahme. In Ihrem Fall würde dies wie folgt aussehen:
Tags und Links html css dom css3 css-selectors