not:first-child selektors

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"?

Alexander Abakumov
Rediģēts jautājums 28pēcpusdienari4t decembrī 2018 в 10:06
Programmēšana
css css-selectors
5pēcpusdienari2t septembrī 2012 в 9:09
11 skati
Risinājums

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.

Tieme
Rediģēta atbilde 24pēcpusdienari2t februārī 2016 в 1:53
Komentāri (3)

Š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.

Komentāri (3)

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.

Alexander Abakumov
Rediģēta atbilde 28pēcpusdienari4t decembrī 2018 в 10:20
Komentāri (2)