Share
Este timpul să învățăm un nou CSS, nu-i așa??
Cu toții suntem obișnuiți cu noi funcții care sunt introduse în cadrele din stânga și din dreapta, dar uităm adesea că în cadrul limbajelor web de bază pe care le folosim în fiecare zi.
Selecția CSS Selectors Level 4 din 15 ianuarie conturează un salt major în caracteristicile CSS.
Înainte de a începe, ar trebui să știți: CSS-ul pe care îl veți găsi în acest articol, astăzi, va funcționa în mare măsură în orice browser. Chiar și cea mai nouă dintre cele noi. Motivul pentru aceasta este că proiectul este exact așa - un proiect. Aceasta este cea de-a patra versiune a proiectului de selecție de nivel 4, care a început în 2011. Selectorii sugerați în proiect sunt o specificație pentru noi selectori sugerați de editorii documentului însuși, printr-o multitudine de deliberare și colaborare cu persoanele din comunitate care participă la lista de discuții W3C.
Deci ce înseamnă asta? Aceasta înseamnă că, în viitorul relativ apropiat, vom vedea probabil multe dintre aceste caracteristici implementate, iar multe vor fi livrate în versiuni de dezvoltare a browserelor precum Chrome și Firefox.
Să ne uităm la unele dintre noile selectori!
Am văzut-o :nu selectorul înainte în selectorii de nivel 3. Cu toate acestea, actualul proiect de nivel 4 :nu selectorul permite multiple argumente cu potrivire mai complexă.
mai înainte, :nu ar putea fi utilizat numai cu un singur selector și nu a putut fi combinat. De exemplu, nivelul 3 :nu ar putea arăta astfel:
a: nu ([href * = "somesite.com"])
Aceasta ar alege toate etichetele de ancorare care nu aveau un href inclusiv șirul "Somesite.com". Dar, cu noul proiect, putem face lucruri mai interesante.
Vom acoperi : are în curând, dar pentru moment, aici este un selector care selectează toate legăturile care nu sunt descendenți direcți ai elementelor cu o clasă de col sau o clasă care începe cu col (cum ar fi clasele de rețea ale Bootstrap col-md-4). De asemenea, va ignora ancorele care au elemente img ca descendenți.
a: nu ([class | = "col"]> a,: a (img))
Acest selector ne permite, de asemenea, să facem lucruri precum:
div: nu (div + div)
Aceasta selectează toate divs care nu sunt frații următorii în linie ai altor div.
Prin adăugarea textului : Nth-ultimul-copil pseudo-clasa putem face, de asemenea, lucruri de genul:
div: nu (.container> div: nth-last-child (-n + 2))
Aceasta ar selecta toate divs, cu excepția celor care sunt descendenți direcți ai .recipient element și sunt ultimii doi frati.
După cum puteți vedea, aceste reguli pot deveni foarte puternice și complexe; dar să adăugăm și mai multă flexibilitate în mix prin introducerea : are pseudo selector.
: are pseudo-selectorul vă permite să selectați elementele care au trecut în argumente ca și copii. De exemplu, pentru a selecta toate legăturile de ancorare care au elemente de imagine ca copii, ați folosi următoarea sintaxă:
a: a (img)
in orice caz, : are nu se limitează la selectori simpli. Puteți să vă combinați : are cu :nu și : Nth- * selectori pentru a crea selectori relaționali destul de complexi.
De exemplu, să selectăm masa elemente care au mai mult de zece rânduri:
tabel: are (tr: nth-of-type (11))
Ce zici de selectarea a corp element al cărui ultim element copil nu este un subsol?
corp: nu (: are (footer: last-child))
În prezent, putem viza hyperlink-uri folosind :legătură și :vizitat. Acest lucru merge mai departe decât pur și simplu folosind A selector, deoarece verifică prezența href, și verifică istoricul de navigare al utilizatorului pentru a determina dacă o anumită legătură a fost vizitată.
: link,: vizitat culoare: albastru;
Cu selectorii de nivel 4 propuși, am putea să folosim toate legăturile, vizitate sau nu : Orice link-. Stilul de mai sus este relativ echivalent cu:
: any-link culoare: albastru;
Până la selectorul de nivel 4, CSS a primit o a global domeniul de aplicare. Cu alte cuvinte, dacă adăugați următorul CSS:
div culoare: # 444;
toate divs va primi culoare: # 444 stil stil. (Aceasta presupune că nu sunt aplicate alte stiluri concurente.) Selectorii de nivel 4 permit ca foile de stil și etichetele de stil să fie scoped la un element:
Aceasta este în afara domeniului de aplicare.
În acest exemplu, am aplicat un domeniu de aplicare la o etichetă de stil în interiorul deoparte element. Regulile din această etichetă de stil se vor aplica numai descendenților din stilelementul părinte.
:chibrituri pseudo selectorul ne permite să verificăm dacă un element se potrivește cu o listă de elemente. De exemplu, dacă v-ați dorit să vizați toate etichetele ancora, paragraful și h2 într-un articol, ați putea realiza acest lucru cu următoarele:
articol: meciuri (h2, a, p)
Acest lucru înlocuiește sintaxa mult mai detaliată anterior:
articolul a, articolul h2, articolul p
Notă: De la această versiune a proiectului, :chibrituri() nu pot fi utilizate cu :nu, : are, sau alt imbricat :chibrituri.
Accentsconagua
>> Probabil sunteți familiarizați cu caracterul spațial care ne permite să scriem reguli descendente, cum ar fi toate ancorele din div:
div a
Dar până acum nu am văzut un selector explicit descendent. Cu selectorii de nivel 4 avem unul: >>.
Cu toate acestea, rețineți că acest lucru are ca rezultat un caracter suplimentar inutil în CSS, deoarece puteți realiza același efect cu un singur spațiu de caractere, deci aveți grijă cum îl utilizați. Se presupune că acționează ca o punte între selectorul imediat al copilului, >, și selectorul de acces shadow-dom, >>>.
|| Acest selector este un plus de bun venit pentru stilul mesei. Să ne uităm la un marcaj pentru o masă de bază:
| ID-ul | Nume | |
|---|---|---|
Stylingul elementelor orizontale grupate (adică: în același rând) a fost istoric relativ simplu de realizat. Elementele de styling grupate vertical este un alt joc cu bile.
Pentru a modela toate elementele care fac parte din coloană cu clasa personal-info, am putea adăuga mai multe clase la marcaj și le-am schițat în mod direct, sau, în căutarea selectorilor de nivel 4, am putea folosi || selector. || selector vă permite să vizați în mod clar aceste td elemente, după cum urmează:
.personal-info || td
Acest lucru împachetează o privire de ansamblu asupra unora dintre noile caracteristici care vin în selectorii de nivel 4! Aceste seturi noi de instrumente de economisire de octeți nu sunt blocate în întregime, dar browserele încep să le implementeze în formele lor timpurii, experimentale, așa că fiți în căutarea actualizărilor spec. Desigur, când vor fi formalizate, le vom acoperi aici pe Tuts+!
Check out cursul nostru despre CSS of the Future, unde Craig Campbell acoperă, printre altele:
