O privire în selectorul structural CSS3 de tip prima
Un lucru pe care-l iubesc despre CSS3 este noul adaos de selectori care ne permit sa orientam elementele in mod special fara a se baza pe clasă, id sau alt atribut al elementului și unul pe care îl vom acoperi aici este următorul selector, : Primul-de-tip.
: Primul-de-tip selectorul va viza primul copil al elementului specificat, de exemplu, fragmentul de mai jos va viza primul h2 pe pagina web.
h2: declarație de stil / * de primă clasă * /
: Primul-de-tip este, de asemenea, egal cu : Nth-de tip (1), astfel încât, mai degrabă decât selectarea numai primul de tipul, putem selecta în continuare al doilea, al treilea și așa mai departe. Fragmentul următor va viza cel de-al doilea h2 element pe pagina web.
h2: nth-of-type (2) / * declarație de stil * /
: Primul-de-tip” vs. “:primul copil”
Poate părea că acești doi selectori fac același lucru, dar asta nu este cazul. Să vedem următoarea demonstrație:
Să presupunem că avem cinci elemente de paragraf înfășurate într-un div, asa:
Pragraph 1
Pragraph 2
Pragraph 3
Pragraph 4
Pragraph 5
Acum, dorim să selectăm primul paragraf folosind :primul copil selector.
p: primul copil padding: 5px 10px; raza de graniță: 2 pixeli; fundal: # 8960a7; culoare: #fff; frontieră: 1px solid # 5b456a;
Așa cum am anticipat, primul paragraf este selectat cu succes.
- : Demo primul copil
Cu toate acestea, când noi adăugați un element diferit înainte primul paragraf, să zicem un h1, cum ar fi fragmentul de mai jos:
Rubrica 1
Pragraph 1
Pragraph 2
Pragraph 3
Pragraph 4
Pragraph 5
primul paragraf nu va fi selectat, ca primul copil din interiorul div este nu mai este un paragraf, dar acum este un h1.
Deci, aceasta este situația în care : Primul-de-tip selector vine pentru a rezolva problema.
p: prima de tip padding: 5px 10px; raza de graniță: 2 pixeli; fundal: # a8b700; culoare: #fff; frontieră: 1px solid # 597500;
- : Demo de primă tip
“Ultimul” Selector
Unde există “primul”, atunci va exista și “ultimul”.
Inversitatea celor doi selectori pe care le-am discutat mai sus sunt următorii doi selectori; :ultimul copil si : Ultima-de-tip. Ele sunt în esență aceleași ca cele de mai sus, cu excepția cazului în care țintesc ultimul copil al elementului specificat.
De exemplu, acest fragment de mai jos va viza ultimul paragraf din div.
p: ultimul copil padding: 5px 10px; raza de graniță: 2 pixeli; fundal: # 8960a7; culoare: #fff; frontieră: 1px solid # 5b456a;
- : demonstrația ultimului copil
Și acest fragment va viza ultimul paragraf în aceeași situație pe care am discutat-o mai sus; de data aceasta este urmată direct de un element diferit.
p: ultimul tip padding: 5px 10px; raza de graniță: 2 pixeli; fundal: # a8b700; culoare: #fff; frontieră: 1px solid # 597500;
- : Demo ultima de tip
Selectivizrul
Ca orice altă caracteristică nouă în CSS3, aceste selectori nu sunt acceptate în browsere vechi, în principal Internet Explorer 6 la 8, cu excepția cazului :primul copil selector, așa cum a fost adăugat de la CSS2.1. Relația sa :ultimul copil a fost adăugată doar în CSS3.
Deci, dacă toți selectorii pe care i-am menționat aici sunt într-adevăr necesari pentru web-ul tău, poți folosi o bibliotecă JavaScript numită Selectivizr pentru a emula funcționalitatea selectorului CSS3.
Selectivizatorul este dependent de alte biblioteci JavaScript pentru a lucra, cum ar fi jQuery, Dojo, Prototype și MooTools; și văzând din tabelul de comparație de pe site-ul oficial, MooTools pare să poată face față tuturor selectorilor.
Deci, hai să o includem împreună cu Selectivizrul, după cum urmează:
Comentariul condițional de mai sus va asigura că aceste biblioteci vor fi încărcate numai în Internet Explorer 8 și mai jos.
În cele din urmă, puteți vedea demo-ul de la următoarele link-uri și ar trebui să funcționeze acum atât în browserele moderne cât și vechi (IE8 și mai jos). De asemenea, puteți descărca fișierul sursă pentru o examinare ulterioară. se bucura.
- Demo
- Descărcați sursa
