Ein Blick in die CSS3 Negation (NOT) -Option
CSS hat einige Selektoren, mit denen Sie Elemente unter bestimmten Bedingungen auswählen können, z :schweben, :Fokus, :aktiv, usw. Heute werden wir diese Selektoren jedoch nicht behandeln. Wir werden eine Methode untersuchen, die noch wenig bekannt ist, aber von den meisten Webdesignern verwendet wird - das ist die :nicht Wahlschalter oder auch Negationswähler genannt.
Was tut es?
Ich bin mir sicher, dass das :nicht Name selbst hat bereits seine Funktion beschrieben, die er einfach auswählen wird das Gegenteil des angegebenen Elements oder der angegebenen Bedingung. Zum Beispiel:
Diese Syntax wählt ein anderes Element als aus p (Absatz).
:Nicht p) Während die folgende Beispielsyntax die Option auswählt div Element, das tut nicht Klasse haben ABC
div: nicht (.abc) Also gut, jetzt versuchen wir diesen Selektor in einem echten Beispiel:
Lassen Sie uns zunächst ein paar Absätze mit ein paar Links von Wikipedia und ein paar Links mit fiktiven Domains erstellen. Hier ist das HTML-Markup für den Absatz.
Das CSS: keine Selector-Demo
Jujuben applizieren Sesamschnappschüsse Schokoladenkuchen. Haferkuchen Eibisch Wypas Toffee Donut Kuchen. Chupa Chups Jelly Cupcake Gummibärchen. Zitrone lässt Kuchenwaffel fallen.
Käsekuchen-Schokoladenkuchen-Donut Gelee süße Rollpulver Soufflé? chocolate © Schokoladenkuchen. Wypas Zuckerwattezitrone lässt Kuchensüßigkeitsdonut-Bonbonmarzipan fallen. Makronensüßigkeiten Lakritzgelee-o. Süßigkeit-Bonbons der Schokoladentorte Marshmallow Dragé? é Zuckerwatte Brownie Marshmallow.
Pudding Belag Marshmallow Bärentatze. Kuchen-Muffin-Gebäck-Kaugummis Obstkuchen Brownie Gelee-Lebkuchen-Sesamschnappen. Candy Pudding Cupcake Bärentatze. Karottenkuchenmuffin-Zuckerwatte tootsie Rollenmuffin. Jelly Beans-Tarte Dragé ?? 'e süße Zuckerguss Waffelschokolade. Süße Brötchen Toffee Zucker Pflaume Gebäck Dragé? Bonbon-Bonbonmuffin.
Kuchen-Marzipan wenden Gebäck an Wypas Obstkuchen. Haferkuchen Schokolade Wypas Dragé? É Zucker Pflaume Karottenkuchen Zuckerguss. Karamell-Schokoriegel-Hörnchen-Waffelcupcake-Torte-Jujubeschokoladentafel. Biscuit Candy Canes Dragé? É'E.Candy Brownie Haferkuchen Sesam schnappt Käsekuchen Pulver Tootsie Roll Keks Bärenklaue. Soufflé é'gummi Bären Gummibärchen Sesam schnappt Faworki süßer Bonbon des Kuchennachtischs.
Der Plan hier ist: Wir werden nur die Links auswählen, die nicht auf Wikipedia verweisen, und diese dann mit einem Ausrufezeichen versehen, um auf diese Links aufmerksam zu machen.
Zuerst werden wir eine hinzufügen :nach dem Pseudoelement auf allen Links, um die Marke zu platzieren, und wir definieren sie als Inline-Block Element.
a: after Anzeige: Inline-Block;
Wenn Sie dann jeden Link auswählen möchten, der nicht auf Wikipedia verweist, kombinieren wir das :nicht Selektor mit einem Attributselektor. Die Attributauswahl hier wählt jedes Ankertag aus, mit dem das href-Attribut beginnt http://en.wikipedia.org/ und durch die Kombination mit dem :nicht, es wird offensichtlich das Gegenteil wählen. Auf geht's:
a: nicht ([href ^ = "http://en.wikipedia.org/"]): after background-color: # F8EEBD; Grenze: 1px fest # EEC56D; Grenzradius: 3px 3px 3px 3px; Farbe: # B0811E; Inhalt: "!"; Schriftgröße: 10pt; Rand links: 5px; Polsterung: 1px 6px; Position: relativ;
Es klappt! Die Ankertags, die nicht auf Wikipedia zeigen, sind jetzt mit einem Ausrufezeichen versehen.
Chrome Bug
Wenn Sie dies in Chrome anzeigen, werden Sie feststellen, dass der gerenderte Effekt nicht so ist wie oben. Alle Links scheinen unabhängig von der URL ein Ausrufezeichen zu haben.
Dieser Fall wurde tatsächlich als Fehler behandelt. Um diesen Fehler zu beheben, müssen wir diese Regel hinzufügen.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / Anzeige: Inline-Block;
Und jetzt sollte das Problem behoben sein.
- Demo
Fazit
In einigen Fällen verwenden Sie die :nicht Selector ist wirklich die effektivste Option, genau wie im obigen Beispiel, in dem wir einige zufällige Elemente auswählen können, ohne unnötige Klassen oder zusätzliche Markierungen zum Dokument hinzufügen zu müssen.
Mit diesem Selektor können Sie tatsächlich großartige Effekte erstellen. Dies ist ein Beispiel: Filterfunktionalität mit CSS3
