Używam poniższy kod, żeby dodać separatory między moimi elementów menu:CSS: before i: first-child połączeniu
#navigation_center li:before {
content: "| ";
color: #fff;
}
Teraz chcę pierwsza pozycja nie mieć separator przed nim, więc pomyślałem poniższy kod:
#navigation_center li:before:first-child {
content: none;
}
ale że nie robi nic. Czy można łączyć: przed i: pierwsze dziecko?
Spróbuj
#navigation_center li:first-child:before {
content: '';
}
Edycja: Chciałem rozwinąć tą odpowiedź z uwagami FelipeAls. Oryginalne pytanie używane :first, które nie jest prawidłowym selektorem CSS. Zamiast tego użyj :first-child. Ważna jest również kolejność pseudo-selektorów. Pierwszy selektor podrzędny musi być pierwszy.
Mam na myśli :before jako rodzaj modyfikatora selektora. W rzeczywistości nie wybiera elementu tylko przestrzeń tuż przed wybranym elementem.
Mimo, że odpowiedź hradac powinna wystarczyć, pomyślałem, że najlepiej będzie przeprowadzić kilka możliwych permutacji, aby pomóc nowicjuszom.
.works:first-child:before
{
\t color: green;
\t content: 'working ';
}
.works:not(:first-child):after
{
\t color: green;
\t content: ' is working';
}
.broken:before:first-child
{
\t color: red;
\t content: 'this will never show up';
}
.broken:after:not(:first-child)
{
\t color: red;
\t content: 'and this will not show up either';
}works:
<div>
\t <div class='works'>
\t something
\t </div>
\t <div class='works'>
\t something
\t </div>
\t <div class='works'>
\t something
\t </div>
</div>
<hr/>
broken:
<div>
\t <div class='broken'>
\t something
\t </div>
\t <div class='broken'>
\t something
\t </div>
\t <div class='broken'>
\t something
\t </div>
</div>Weźmy ten APT:
div.works są wewnątrz divdiv.broken są również wewnątrz divfirst-child, a następnie wybierając puste miejsce tuż przed nim.first-child, a następnie wybiera puste miejsce przed nimi.:before:first-child próbuje wybrać pustą przestrzeń, ale następnie sprawdza, czy jest to first-child i nie jest (ponieważ technicznie nie jest jeszcze w drzewie DOM), podobny problem występuje z :not(:first-child).
Szybkie wyjaśnienie hradac odpowiedź: ': first' jest selektor jQuery (i jQuery używa Sizzle, być kompletna) gdy używa CSS': first-child' – FelipeAls
@FelipeAlsacreations Dzięki za rozszerzenie na moją odpowiedź. Nie jestem pewien, ale myślę, że kolejność jest również ważna, gdy "pierwsze dziecko" pojawia się przed "przed", ale nie testowałem tego. – hradac
@hradac Masz rację, jest porządek. O ile mogę sobie przypomnieć ': before' i': after' powinno być napisane na końcu, po prawej stronie. Potwierdzony przez moduł selektorów CSS3: [Tylko jeden pseudoelement może pojawić się na selektorze, a jeśli jest obecny, musi pojawić się po sekwencji prostych selektorów (...)] (http://www.w3.org/TR/selectors/ # pseudoelementy) – FelipeAls