30 Css selectoare, selectoare tipuri și sintaxă în css
Ce css selector - o descriere a unui element sau grup de elemente, care prezintă un element de browser selectați pentru aplicarea acestuia stil. Să considerăm selectorii CSS de bază.
CSS selectorul de clasa X. Diferența dintre id-ul și de clasă că aceeași clasă poate avea mai multe elemente de pe pagina, iar id-ul este întotdeauna unic. Clasele ar trebui folosite pentru a aplica același stil la mai multe elemente.
-
Ce browsere sunt acceptate:
CSS Selector ID. semnul diez înainte de a selectorului CSS X selectează un element al cărui id = H. Prin stiluri de etichetare prin ID-ul este întotdeauna merită să ne amintim că acesta trebuie să fie unic - singurul astfel încât id-ul trebuie să fie pe pagina. Prin urmare, este mai bine să utilizați selectoarele clase, clase sau combinații de nume tag-uri. Cu toate acestea, selectorii cu id-ul perfect utilizat în testarea automat, ca îi permit să interacționeze direct cu elementul dorit, și au încredere că aceasta este doar o astfel de pagină.
-
Ce browsere sunt acceptate:
CSS selectorul tuturor elementelor. Un asterisc selectează toate elementele care există pe pagină. Mulți dezvoltatori l utilizați pentru a elimina (resetare) valorile indentare (marja și padding) pentru toate elementele de pagină. Cu toate acestea, în practică, este mai bine să nu facă acest lucru, deoarece acest selector CSS browser-ul destul încarcă căutarea tuturor elementelor de pe pagina.
Simbolul * poate fi de asemenea utilizat pentru a selecta toate elementele de copil:
În acest exemplu, toate elementele de copil sunt alocate elemente (descendenți) #header. Dar este întotdeauna merită să ne amintim că acest selector este destul de greu pentru browser.
-
Ce browsere sunt acceptate:
Selector de tip CSS. Cum de a selecta toate elementele de același tip în cazul în care nu au nici un id nu clase? Acesta ar trebui să folosească CSS selectorul pentru tipul de element. De exemplu, pentru a selecta toate listele ordonate în pagină, folosiți ol așa cum este arătat mai sus.
-
Ce browsere sunt acceptate:
CSS Selector copil sau selector copil CSS este folosit mai des. Este utilizat în cazul în care este necesar pentru a selecta elementele unui anumit tip dintr-o multitudine de elemente copil. De exemplu, evidențiați toate link-urile care se găsesc în celula li. În acest caz, utilizați acest selector. Folosind un lanț de selectori, întotdeauna întrebați-vă dacă este posibil să se izoleze acest element pentru a utiliza secvența chiar mai scurtă de selectori.
-
Ce browsere sunt acceptate:
Adiacent elementul selector selectează numai tipul elementului Y, care vine imediat după elementul X. În acest caz, fiecare paragraf imediat după fiecare element div va primi un tip special de font și dimensiune.
-
Ce browsere sunt acceptate:
Selector copil CSS. Diferența dintre Y selectoare X și X> Y care au considerat CSS selectorul va selecta numai directe elemente copil (selectează doar descendenții direcți). De exemplu:
Selector CSS #content> ul va selecta doar ul, care este un descendent direct al blocului div cu id = "container". El alege ul, este un descendent al primului li. Acest lucru este destul de avantajos selector de viteze CSS.
-
Ce browsere sunt acceptate:
Selector care alăptează (sablingovyh) mai puțin stricte decât elementele X + Y. El alege nu numai primul, ci și toate celelalte elemente p, pentru a ajunge la ol.
-
Ce browsere sunt acceptate:
9) X: X a vizitat și: link-
-
Ce browsere sunt acceptate:
10) X [titlu]
CSS atribut selector. În acest exemplu, vom selecta doar link-urile care au titlul de atribut.
-
Ce browsere sunt acceptate:
11) X [href = "foo"]
-
Ce browsere sunt acceptate:
12) X [href * = "stijit"]
-
Ce browsere sunt acceptate:
13) X [href ^ = "http"]
-
Ce browsere sunt acceptate:
14) X [href $ = "Jpg"]
Acesta folosește o expresie regulată și simbolul $ pentru a indica sfârșitul liniei. În acest exemplu, suntem în căutarea pentru toate link-urile care se referă la imagini cu extensia .jpg.
-
Ce browsere sunt acceptate:
15) X [date - * = "foo"]
Aici vom folosi un selector CSS pentru atribute personalizate. Adăugați propriul nostru atribut de date-filetype la fiecare link:
Acum, cu CSS selectorul de cele de mai sus, puteți selecta toate link-urile care duc la imagini cu orice extensie.
-
Ce browsere sunt acceptate:
Cu ajutorul acestei proceduri, putem selecta elemente cu combinația dorită de atribute:
-
Ce browsere sunt acceptate:
17) X: verificat
Această pseudo-clasă selectează doar elemente, cum ar fi un buton casetă de selectare sau radio, și apoi numai atunci când acestea sunt deja într-o stare marcată.
-
Ce browsere sunt acceptate:
18) X: după
Pseudo: înainte și: după foarte mare ajutor - acestea creează conținut înainte și după elementul selectat.
Aici, cu ajutorul pseudo-clasă: după după blocul cu .clearfix clasa a creat o linie goală, și apoi purificat. Această abordare este utilizată atunci când nu se poate folosi proprietatea overflow: ascuns.
-
Ce browsere sunt acceptate:
19) X: hover
-
Ce browsere sunt acceptate:
20) X: (selector)
Pseudo-nu (negație) este utilă atunci când, de exemplu, trebuie să selectați toate div, cu excepția care are id = „conținut“.
Prin același principiu, puteți selecta toate elementele cu excepția p:
-
Ce browsere sunt acceptate:
21) X :: pseudoElement
Pseudo pot fi folosite pentru a aplica stiluri de fragmente de elemente - de exemplu, prima linie a paragrafului sau prima literă dintr-un cuvânt. Acest lucru se aplică numai elemente de nivel bloc.
Selectarea prima literă a paragrafului:
Alegerea prima linie în paragraful:
-
Ce browsere sunt acceptate:
22) X: primul copil
Pseudo-prim copil selecteaza numai primul copil al părintelui său. Acesta este adesea folosit pentru a elimina frontiera din primul articol din listă. Acesta a fost un alt pseudo, deoarece CSS 1.
-
Ce browsere sunt acceptate:
23) X: ultimul copil
Pseudo ultimul copil selectează ultimul copil al elementului părinte. El a apărut doar din CSS 3.
-
Ce browsere sunt acceptate:
24) X: numai copil
numai-copil pseudo-clasă vă permite să selectați elementele care sunt singurii descendenti pentru părinții lor.
-
Ce browsere sunt acceptate:
25) X: nth-copil (n)
Selectează copilul la numărul specificat în parametrul. Selector nth-copil ia un întreg ca parametru, cu toate acestea, de numărare c 1, adică dacă doriți să selectați al doilea element din listă, utilizați li: nth-copil (2). Toate pseudo folosind nth-copil a apărut doar din CSS 3.
-
Ce browsere sunt acceptate:
26) X: nth-ultimul-copil (n)
Dacă aveți o listă mare de elemente în UL și alege al treilea element de la sfârșitul anului? În loc de a scrie Li: nth-copil (109). Puteți utiliza selectorul la ultimele descendenți ai nth-ultimul-copil. Această metodă este aceeași ca și cea precedentă, dar începând de la sfârșitul.
-
Ce browsere sunt acceptate:
27) X: nth-de tip (n)
Dacă o pagină are patru listă neordonată și doriți să aplicați stilul numai a treia dintre ele, cu un ID unic, ar trebui să utilizați-nth de tip.
-
Ce browsere sunt acceptate:
28) X: nth-last-of-tip (n)
Pseudo nth-last-of-tip (n) pentru selectarea elementului nth unui anumit tip de capăt.
-
Ce browsere sunt acceptate:
29) X: numai de tip
Pseudo-numai de tip selecteaza elemente care nu dispun de vecini în cadrul elementului mamă. De exemplu, puteți selecta toate ul, care conțin numai un singur Li.
-
Ce browsere sunt acceptate:
30) X: primul-de-tip
Pseudo-prim-de-tip selectează primul element de tipul specificat.
-
Ce browsere sunt acceptate: