Man ir div
tags, kas satur vairākus ul
tagus.
Es varu iestatīt CSS īpašības tikai pirmajai ul
tag zīmei:
div ul:first-child {
background-color: #900;
}
Tomēr mani turpmākie mēģinājumi iestatīt CSS īpašības katrai citai ul
tag zīmei, izņemot pirmo, nedarbojas:
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
Kā es varu rakstīt CSS: "katram elementam, izņemot pirmo"?
Viena no jūsu publicētajām versijām [faktiski darbojas][1] visās mūsdienu pārlūkprogrammās (kur CSS selektori 3. līmenī ir atbalstīti):
div ul:not(:first-child) {
background-color: #900;
}
Ja jums ir jāatbalsta novecojušās pārlūkprogrammas vai ja jums traucē selektora :not
ierobežojums (tas kā argumentu pieņem tikai vienkāršu selektoru), tad varat izmantot citu metodi:
Definējiet noteikumu, kura darbības joma ir plašāka par jūsu iecerēto, un pēc tam "atsauciet" to nosacīti, ierobežojot tā darbības jomu līdz iecerētajam:
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
Ierobežojot darbības jomu, izmantojiet noklusējuma vērtību katram CSS atribūtam, ko iestatāt.
Šis CSS2 risinājums ("jebkurš ul
pēc cita ul
") arī darbojas, un to atbalsta vairāk pārlūkprogrammu.
div ul + ul {
background-color: #900;
}
Atšķirībā no :not
un :nth-sibling
selektoru adjacent sibling selector atbalsta IE7+.
Ja JavaScript maina šīs īpašības pēc lapas ielādes, jums vajadzētu izpētīt dažas zināmās kļūdas IE7 un IE8 implementācijās. Skatīt šo saiti.
Jebkurai statiskai tīmekļa lappusei tam vajadzētu darboties nevainojami.
Tā kā IE6-8 nepieņem :not
, es jums ieteiktu šo:
div ul:nth-child(n+2) {
background-color: #900;
}
Tātad jūs izvēlaties katru ul
tā mātes elementā izņemot pirmo elementu.
Vairāk nth-child
[piemēru] skatiet Krisa Koiera (Chris Coyer's) "Noderīgi :nth-child Recipes" rakstā1.