Selectorul selectează fiecare element din pagină. Adesea folosit pentru a reseta valoarea marginii și a padding-ului. Se crede că selectorul încarcă prea mult browserul, deci ar trebui evitat.
Puteți să-l utilizați pentru a selecta elementele copilului.
# (identificator)
Un semn lattic va selecta un element cu id-ul specificat.
Selectorul clasei CSS. Utilizați clasele pentru a aplica un stil mai multor elemente similare.
X Y (spațiu)
Selector CSS pentru copii. Dacă trebuie să selectați elementele de un anumit tip de o multitudine de elemente copil, folosiți acest selector. De exemplu, trebuie să selectați toate legăturile care sunt în elementul li.
Evitați selectorii imbricați, cum ar fi Y Z A B.block.
Selectorul de etichete
Selectăm anumite etichete ale paginii.
: vizitat și: link (pseudo-clase)
Pseudo-class: link servește pentru a selecta toate link-urile care nu au fost încă făcute clic pe. Pseudo-clasa: vizită selectează link-urile deja vizitate.
Selectează următorul element. Acesta va selecta doar un element de tip Y care merge imediat după elementul X. În exemplu, textul primului paragraf după fiecare ul va fi verde.
Diferența dintre standardul X Y și X> Y este că selectorul CSS în cauză va selecta numai copii direcți.
Selector #container> ul va selecta numai ul. care sunt copii direcți de div cu id = container. El nu alege, de exemplu, ul. care sunt copiii primului li.
Selectorul este similar cu X + Y, cu toate acestea, este mai puțin stricte. Dacă utilizați ul + p, puteți selecta doar primul element care urmează X. În acest caz, vor fi selectate toate elementele lui p mergând la ul.
[titlu] (atribute)
Selectați toate link-urile care au atributul titlu. Legăturile rămase nu vor fi afectate.
[href = "Foo"]
Toate link-urile care se leagă de site-ul specificat vor fi selectate. Toate celelalte linkuri rămân neschimbate.
Dacă pagina nu duce la un domeniu, ci la o pagină de domeniu, puteți utiliza expresii regulate.
X [HREF * = "webmaster.alexanderklimov.ru"]
X [href ^ = "http"]
X [href $ = ". JPG"]
Dacă vrem să setăm stilul numai pentru linkurile care duc la fotografie? Trebuie să căutați sfârșitul liniei.
Utilizăm simbolul expresiei regulate "$" pentru a indica sfârșitul liniei. În acest scop căutăm linkuri care se referă la fișiere jpg sau url-s, la sfârșitul cărora se află ".jpg".
X [date - * = "foo"]
Cum scriem acum un selector CSS care ar evidenția linkurile către toate tipurile de imagini.
O altă posibilă soluție este folosirea atributelor personalizate. Adăugați propriul atribut de date-fișier pentru fiecare legătură.
Acum putem selecta astfel de link-uri folosind acest selector:
) vă permite să selectați un atribut specific din lista de atribute, separate printr-o virgulă.
Această pseudo-clasă alocă numai elemente UI, cum ar fi un switch sau caseta de selectare. Și cele care sunt marcate / selectate.
Pseudo-clasele generează conținut în jurul elementului selectat.
Mulți s-au familiarizat cu aceste pseudo-clase atunci când lucrează cu hack-ul clar fix.
Acest hack utilizează: după ce adăugați un spațiu după element și pentru a preveni curgerea acestuia.
Conform specificației CSS3, trebuie să utilizați două coloane (: :). Cu toate acestea, puteți utiliza un singur colon pentru compatibilitate.
Stilul elementului când mutați mouse-ul peste el.
margine de fund: 1px solid negru; arata mai bine decat decorarea textului: subliniaza;
: nu (selector)
O pseudo-clasă de negare este foarte utilă. Trebuie să selectați toate div, cu excepția celei care are id = container.
Puteți selecta toate elementele cu excepția p.
:: pseudo-element
Putem folosi pseudo-elemente pentru a face fragmente de elemente, cum ar fi prima linie sau prima literă. Rețineți că ele trebuie aplicate elementelor blocului pentru ca acestea să intre în vigoare.
Pseudo-elementul este specificat de două coloane.
Alegem prima literă din paragraf.
Acest cod va selecta toate paragrafele și, la rândul lor, va selecta primele litere și va aplica acest stil acestora.
Selectăm prima linie din paragraf.
În mod similar datorită. prima linie, am setat stilul primului rând din paragraf.
„Pentru compatibilitate cu foi de stil existente, browser-ul trebuie să înțeleagă elementele de notație pseudo anterioare cu două puncte, introduse în CSS 1 & 2 (: prima linie de prima literă înainte și: .. După) Această compatibilitate nu este permisă pentru noua pseudo-impuse. în această specificație. "
: n-copil (n)
Puteți selecta al treilea element copil. Vă rugăm să rețineți că nth-copil acceptă un număr întreg ca parametru, cu toate acestea, nu de numărare 0. este Dacă doriți să selectați al doilea element din listă, utilizați li: nth-copil (2).
Puteți selecta fiecare al patrulea element al listei, pur și simplu scriind li: nth-child (4n).
: n-ultimul copil (n)
Ce se întâmplă dacă aveți o listă uriașă de elemente și trebuie să selectați al treilea element de la final? În loc să scrieți li-nth-child (397), puteți folosi nth-last-child. Această metodă este aproape identică cu cele de mai sus, dar contele este de la sfârșit.
: n-a-tip (n)
Acesta vă permite să selectați nu un element copil, ci un element de un anumit tip. Imaginați-vă că pe pagină există cinci liste neordonate. Dacă doriți să aplicați stilul numai pentru a treia ul care nu are un id unic, trebuie să utilizați nth-of-type.
: n-ul-de-tip (n)
De asemenea, putem folosi n-ul-de-tip, numărați elementele de la capăt.
: primul copil
Această pseudo-clasă selectează primul copil. Este adesea folosit pentru a elimina marginea în primul și ultimul element al listei.
: ultimul copil
În contrast: primul copil: ultimul copil selectează ultimul copil.
: numai-copil
Vă permite să selectați elementele care sunt singurele copii. De exemplu, aplicați stilul de mai sus acestui cod html:
Numai primul div este selectat, p, deoarece este singurul copil.
: numai de tip
Foarte interesantă pseudo-clasă. Ea afectează elementele care nu au vecini în elementul părinte. De exemplu, alegem ul cu un singur element din listă.
Singura soluție este de a utiliza doar de tip.
: primul-de-tip
Selectează primul element al tipului specificat.
Cum se evidențiază paragraful 2.
Articole similare
Trimiteți-le prietenilor: