<div id="main">
<p> one </p>
<p> two </p>
<p> three </p>
<p> four </p>
<p> five </p>
<div>
Ich will nicht CSS anwenden auf den ersten <p>One</p>Wie überspringen Sie das erste Kind?
p {color:red}
ich von :first-child gerade Gegenteil müssen.
Mit the negation pseudo-class:
p:not(:first-child) { color: red; }
Browser-Unterstützung ist very strong jetzt, aber Alternativen sind:
p { color: red; }
p:first-child { color: black; }
und:
* + p { color: red; }
Quentins :not() Lösung funktioniert gut für moderne Browser:
Seine Alternative für ältere Browser funktioniert auch gut, außer dass es eine Überschreibungsregel für das erste Kind verwendet. Es ist nicht erforderlich aber ...
Sie können einfach ein Geschwister-Selektor verwenden die gleiche Regel wie die oben, ohne die Notwendigkeit, gelten sie für p:first-child außer Kraft zu setzen. Eine dieser Regeln funktioniert:
Die adjacent sibling selector, die jede p übereinstimmt, die direkt nach kommt ein p:
p + p { color: red; }
Die general sibling selector, die jede p übereinstimmt, die überall nach einer p kommt :
p ~ p { color: red; }
Beide Kombinatoren arbeiten hier identisch; Die feinen Unterschiede zwischen ihnen treffen nur zu, wenn Sie andere Elemente im Mix haben. Weitere Informationen finden Sie unter den angegebenen Links.
Sie auch "Tilde" (~) Operator
<!DOCTYPE html>
<html>
<head>
<style>
p ~ p {
background:#ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
</html>
Hier verwenden kann, ist die JSFiddle Demo http://jsfiddle.net/RpfLa/344/
17 FF auf einen Schnelltest Did, 23 Chrome, Safari 5.1, IE9, IE1- 8 auf compaitbility Modus
Nicht sehr effizient, da das 6. 'P' 5 mal übereinstimmt. – Rudie
Das ist ein guter Punkt ... – MonteCristo
Works jedes Mal und muss nicht zum Verhängnis:
p + p {
/* do 15 special things */
}
Es wird jedes P verwendet, dem ein P vorangestellt wurde. Legen Sie keine Eigenschaft fest, um es später rückgängig zu machen. Sie sollten nur hinzufügen, wenn Sie es helfen können, nicht subtrahieren.
Ich denke :nth-child() wird den Trick tun.
p:nth-child(n+2){
background-color:red;
}
Diese Arten alle der p Tags mit Ausnahme der ersten, weil es auf dem zweiten Kind beginnt. Sie könnten dann die erste Marke separat mit p:first-child formatieren.
Für die zweite Lösung würde ich vorschlagen, 'p: first-child {color: inherit; } 'anstelle von' p: first-child {Farbe: schwarz; } 'So funktioniert es mit jeder voreingestellten Farbe. –