Știi selectorii

CSS3-selectoare - în mod fundamental un lucru bun.

Prin urmare, selectorii trebuie să știe.

Principalele tipuri de selectoare doar câteva:

• * - orice produs.
• div - elemente cu o astfel de etichetă.
• #ID - ID-ul element de date.
• .class - elemente cu o astfel de clasă.
• [Name = "valoare"] - atributul selectori (vezi mai jos.).
• : - «pseudo vizitat-clase“, restul sunt condiții diferite pe elementul (a se vedea mai jos.).

Selectoare pot fi combinate scriind în mod constant, fără un spațiu:

• .c1.c2 - elemente simultan cu două clase și c1 c2
• un # id.c1.c2: a vizitat - un element cu un anumit id. clase și c2. c1 și pseudo-au vizitat

În CSS3 Există patru tipuri de relații între elementele.

Cel mai faimos probabil știți:

• div p - elemente p. descendenți ai div.
• div> p - numai descendenții direcți

Există două mai rare:

p - vecinii dreapta: p toate la același nivel de imbricare care merg după div.

div + p - primul vecin dreapta: p la același nivel în ierarhia, care vine imediat după div (dacă este cazul).

Să ne uităm la un exemplu de HTML:

primul-copil - primul copil al părintelui său.

ultimul copil - ultimul descendent al părintelui.

numai-copil - singurul descendent al societății-mamă, fără elemente învecinate.

nth-copil (a) - un descendent al unui număr de mamă, de exemplu: nth-copil (2) - al doilea copil. Numerotarea începe cu 1.

nth-copil (un + b) - o extensie a selectorului anterior prin specificarea numărului formulei descendent unde a, b - constante, și înseamnă orice număr întreg sub n.

Acest pseudo va filtra toate elementele care se încadrează în formula atunci când orice n. De exemplu: -: nth-copil (2n) va da elemente de numărul 2. 4. 6 ..., adică, seara.

• : Nth-copil (+ 1 2n) elemente dau numărul 1 ... 3, care este ciudat.
• : Elemente de nth-copil (3n + 2), se va număra 2. 5. 8, și așa mai departe.

Exemplu de utilizare pentru alocarea listei: