Caracteristica selectoare în CSS
În CSS, este posibil să se facă referire la elementele de document HTML pe valoarea atributelor sale. Desigur, știi deja despre ID-ul și clase. Să aruncăm o privire la următorul cod HTML:
Acest element de trei atribute: id, class și rel. Consultați acest element cu CSS, puteți fie prin ID-ul său (# primul-titlu), sau în numele unei clase (.magical). Cu toate acestea, știați că puteți accesa, de asemenea, utilizând atributul rel? Aceasta se numește selectori de atribut:
Există mai multe opțiuni pentru utilizarea lor. Să vedem mai detaliat cu diferite opțiuni și să încerce să vină cu scenarii pentru utilizarea atributelor în viața reală.
[Rel = extern]
Atribut se potrivește exact cu valoarea specificată
In exemplul de mai sus, elementul atribut h2 este egal cu „prieten“. Un selector pe care am scris referindu-se la el ca o valoare a atributului este exact egală cu „prieten“. Este corectă. Să ne uităm la un alt exemplu:
Un exemplu mai realist - blogroll.Verificați stilizare (blogroll). Să presupunem că aveți o listă de link-uri către site-urile noastre surori:
Și doriți să setați fiecare stil de link-ul. Abordarea tradițională este faptul că fiecare link indică spre o clasă, dar această abordare necesită marcare suplimentară. Un alt mod - este de a utiliza un pseudo-nth-copil. Cu toate acestea, această abordare necesită o anumită ordine elemente. Această problemă este ideal pentru utilizarea de către selectoare atribut, deoarece link-uri sunt deja unice.
Sunt sigur că cele mai multe ori acest tip de selector este folosit pentru elementele de intrare (text, radio etc.). Toate aceste elemente sunt foarte diferite unele de altele, și scrie ceva de genul de intrare
Aceasta este singura modalitate de a stiliza elementele de intrare fără marcare suplimentare și tot felul de trucuri.
[Rel * = extern]
Atribut conține valoarea predeterminată.
Acum începe mai multe lucruri interesante. Semnul egal în atributul selectorului poate fi precedat de un alt personaj, care se schimbă numirea utilizării sale. De exemplu, „=“ înseamnă „o valoare predeterminată poate fi oriunde în valoarea atributului menționat.“ Luați în considerare următorul exemplu:
Puteți evidenția toate aceste elemente, după cum urmează:
[Rel ^ = extern]
Atributul începe cu o valoare predeterminată
Viața exemplu ar putea fi: să presupunem că aveți nevoie pentru a evidenția link-ul de la site-ul user-friendly vă diferită de cealaltă culoare de referință. Indiferent de locul unde sunt link-uri la pagina de pornire, sau orice alt. Toate aceste link-uri pot evidenția următoarele:
[Rel $ = extern]
Atribut se termină la o valoare predeterminată
Dacă se poate face o alegere pe partea de sus a valorii atributului, atunci de ce nu fi inversat oportunități?
Sincer, nu am putut găsi un exemplu real al utilizării acestui tip de selector. Dar eu cred că există. Să presupunem că trebuie să se evidențieze legăturile care se termină fără alte caractere semnificative:
= Extern]
Atributul este în listă, separate prin spații
După cum știți deja, puteți specifica mai multe clase de stil pentru un element. Și dacă faceți acest lucru, puteți utiliza numele clasei pentru a avea acces la elementul CSS. În cazul selectoare atribut, nu este atât de simplu. În cazul în care atributul rel atribuit mai multe valori (separate prin spații), atunci trebuie să utilizați "
S-ar putea fi de gândire, de ce nu folosim în acest caz, „* =“. Într-adevăr, această opțiune este utilizarea de mai flexibilă, dar poate fi prea flexibil. Privite selector necesită valoarea separate prin spații, iar „=“ - nr. Astfel, dacă aveți două elemente (una cu rel = acasă link prieten. Iar a doua cu = prieten acasă link rel), atunci trebuie să utilizați un selector pentru cazul cu spații, pentru a selecta numai al doilea element.
[Rel | = extern]
Atributul este în listă, separate prin cratime
Lista separată a hyphenated foarte asemanatoare cu lista spațiotemporală separate așa cum este descris mai sus. Dar, din nou, are propriile sale caracteristici înainte de a utiliza selectorul la „=“.
[Title = una] [rel ^ = extern]
Conformitatea cu mai multe atribute
Este important ca elementele de eșantionare au capacitatea de a folosi mai multe selectoare atribut.
Browser-ul Suport
Fiecare exemplu de mai sus, funcționează în toate browserele moderne: Safari, Chrome, Firefox, Opera și IE7 și de mai sus.