Wie verwende ich die not() -Syntax in einem CSS-Selektor?

Question

Gibt es irgendwelche Ressourcen wie verwende ich die Not() -Syntax in einem CSS-Selektor?

wie:

.container[orient="landscape"] > *:not(.toolbar) 

Wenn ja, können Sie bitte mit einem Link und eine Erklärung beantworten?

Answer 1

Alt Obwohl die Pseudo-Klasse: not() in bestimmten Situationen nützlich ist, wird sie nur von den neuesten Browsern unterstützt, da sie Teil der CSS 3-Spezifikation ist. Firefox 2 und 3, Opera, Safari, Chrome und andere auf Gecko und Webkit basierende Browser unterstützen dies, während Trident-basierte Browser (Internet Explorer) dies nicht unterstützen.

Es ist wahrscheinlich eine viel bessere Idee zu diesem Zeitpunkt den „Kaskadierung“ Teil von CSS zu verwenden:

.container[orient="landscape"] * { ... } 
.toolbar {...} 

den .toolbar Selektor Verwenden Sie den .Behälter Wähler außer Kraft zu setzen.

Ich sollte auch darauf hinweisen, dass die Verwendung des Attributselektors [orient="landscape"] in älteren Browsern, speziell IE 6 und darunter, nicht unterstützt wird.

Hier ist ein guter Leitfaden für CSS 3 Funktionen: nicht() enthalten: Smashing Magazine: Take Your Design To The Next Level With CSS3

Answer 2

Decent explanation here.

Sie wissen nicht ganz, was Sie versuchen, mit Ihrem Beispiel zu erreichen, aber es würde wahrscheinlich entweder mehr wie

.container[orient="landscape"]:not(.toolbar) 

oder

.container[orient="landscape"] > :not(.toolbar) 

Answer 3

here's a link

i look denke, es funktioniert nur in FF und Safari, nicht so sehr in IE

Answer 4

Ich möchte eine Beobachtung teilen psuedo-Klassen auf die Kombination, die zur Verwendung für künftige Suchenden von Informationen nützlich sein können: nicht(). Bei der Verwendung von: not() in Kombination mit der Pseudo-Klasse der ersten Zeile habe ich Folgendes festgestellt: not() muss zuerst aufgeführt werden und: first-line danach und nicht umgekehrt. Im folgenden CSS-Beispiel:

.content h1 { 
    font-size: 36px; 
    line-height: 34px; 
    text-transform: uppercase; 
    font-weight: bold; 
} 
.content h1:not(.second):first-line { 
    color: #971d2d; 
} 
.content h1.first { 
    color: #444; 
} 
.content h1.second { 
    color: #666; 
} 
.content h1.second:first-letter { 
    color: #030303; 
} 

Platzierung ": nicht (.second)" nach die ": first-line" nicht nur nicht richtig funktionieren, aber wird sich negativ auf andere Erklärungen in der Schlag Kaskade.

Denken Sie an Ihre Syntax in der gleichen Reihenfolge, wie wenn Sie eine Skriptsprache verwenden würden. So etwas wie folgt aus:

if ($('h1') && !$('.second')) { 
    this.usePseudoClass(':first-line'); 
} 

wäre logisch sinnvoll, die Aufgabe zu erfüllen, anstatt etwas wie folgt aus:

if ($('h1:first-line') { 
    !(this.useClass('.second') 
} 

die nicht wollten.

Prost, hoffe dieser Beitrag wird für andere hilfreich sein.