<div id="main">
<p> one </p>
<p> two </p>
<p> three </p>
<p> four </p>
<p> five </p>
<div>
Nie chcę zastosować css na pierwszym <p>One</p>Jak pominąć pierwsze dziecko?
p {color:red}
muszę po prostu przeciwieństwem :first-child.
p:not(:first-child) { color: red; }
wsparcie Browser jest very strong teraz, ale alternatywy obejmują:
p { color: red; }
p:first-child { color: black; }
i:
* + p { color: red; }
:not() rozwiązanie Quentina działa świetnie dla nowoczesnych przeglądarek:
p:not(:first-child) { color: red; }
Jego alternatywa dla starszych przeglądarek również działa dobrze, poza tym, że wykorzystuje nadrzędną zasadę dla pierwszego dziecka. Nie wymagane jednak ...
można po prostu użyć selektora rodzeństwo zastosować tę samą zasadę, jak ten powyżej, bez potrzeby, aby zastąpić go p:first-child. Albo jeden z tych zasad będzie działać:
adjacent sibling selector, który pasuje do każdego p że pochodzi bezpośrednio po p:
p + p { color: red; }
general sibling selector, który pasuje do każdego p że pochodzi nigdzie po p :
p ~ p { color: red; }
Oba kombinatory działają identycznie; subtelne różnice między nimi mają zastosowanie tylko wtedy, gdy masz inne elementy w miksie. Zapoznaj się z podanymi linkami, aby uzyskać szczegółowe informacje.
Można również użyć "tyldy" (~) 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>
Oto demo JSFiddle http://jsfiddle.net/RpfLa/344/
zrobiłem szybki test na FF 17, Chrome 23, Safari 5.1, IE9, IE1- 8 na tryb compaitbility
Niezbyt wydajne, ponieważ szóste 'P' jest dopasowane 5 razy. – Rudie
To dobry punkt ... – MonteCristo
Działa za każdym razem i nie trzeba zgubą:
p + p {
/* do 15 special things */
}
Trwa każdy P poprzedzony przez P. Nie ustawiaj właściwości, aby później ją cofnąć. Powinieneś tylko dodawać, jeśli możesz pomóc, nie odejmuj.
Myślę, że :nth-child() zrobi lewy.
p:nth-child(n+2){
background-color:red;
}
To wszystko z p tagów wyjątkiem pierwszego style, ponieważ zaczyna się na 2 dziecko. Można następnie ustawić pierwszy znacznik p osobno za pomocą p:first-child.
Dla drugiego rozwiązania sugerowałbym użycie 'p: first-child {color: inherit; } 'zamiast' p: first-child {color: black; } 'więc działa z dowolnym zaprogramowanym kolorem. –