Atributele Css. Selector după valoarea atributului. Prin valori specifice atributelor

Vlad Merjevici

Efectul multor etichete variază în funcție de atributele pe care le folosesc. De exemplu, o etichetă poate crea un buton, un câmp de text și alte elemente de formular doar prin modificarea valorii atributului tip. Cu toate acestea, adăugarea regulilor de stil la selectorul INPUT va aplica stilul simultan tuturor elementelor create folosind această etichetă. Pentru a controla în mod flexibil stilul unor astfel de elemente, selectori de atribute au fost introduși în CSS. Acestea vă permit să setați un stil bazat pe prezența unui anumit atribut de etichetă sau pe valoarea acestuia.

Să ne uităm la câteva utilizări tipice ale unor astfel de selectoare.

Selector de atribute simplu

Setează stilul pentru un element dacă este specificat un anumit atribut de etichetă. Sensul lui nu este important în acest caz. Sintaxa pentru utilizarea unui astfel de selector este următoarea.

[atribut] (Descrierea regulii de stil)
Selector[atribut] (Descrierea regulilor de stil)

Stilul este aplicat acelor etichete în care este adăugat atributul specificat. Nu este permis spațiul între numele selectorului și paranteze pătrate.

Exemplul 13.1 arată cum se modifică stilul etichetei atunci când i se adaugă atributul titlu.

Exemplul 13.1. Tip de element în funcție de atributul său

HTML5 CSS 2.1 IE Cr Op Sa Fx

Selectoare de atribute Q ( font-style: italic; /* Italic */ ghilimele: "\00AB" "\00BB"; /* Schimbați tipul de ghilimele dintr-un citat */ ) Q ( culoare: maro; /* Culoare text * / )

Continuând binecunoscuta lege a lui Murphy, care spune: Dacă pot apărea probleme, atunci cu siguranță se vor întâmpla, putem introduce observația noastră: După ce o pagină web este afișată corect într-un browser, se dovedește că este afișată incorect în altul.

Rezultatul exemplului este prezentat în Fig. 13.1.

Orez. 13.1. Schimbarea stilului unui element în funcție de aplicarea atributului titlu

ÎN în acest exemplu Culoarea textului din interiorul containerului se schimbă atunci când i se adaugă un titlu. Rețineți că nu este nevoie să repetați proprietățile de stil pentru selectorul Q, deoarece acestea sunt moștenite de la selectorul Q.

Atribut cu valoare

Setează stilul pentru un element dacă este specificată o anumită valoare pentru un anumit atribut. Sintaxa aplicației este următoarea.

[attribute="value"] (Descrierea regulilor de stil)
Selector[atribut="valoare"] ( Descrierea regulilor de stil )

În primul caz, stilul este aplicat tuturor etichetelor care conțin valoarea specificată. Și în al doilea - doar anumitor selectori.

Exemplul 13.2 arată cum să schimbați stilul unui link dacă eticheta conține atributul țintă cu valoarea _blank . În acest caz, linkul se va deschide într-o fereastră nouă și pentru a arăta acest lucru, folosind stiluri adăugăm o imagine mică în fața textului linkului.

Exemplul 13.2. Stil pentru deschiderea linkurilor într-o fereastră nouă

HTML5 CSS 2.1 IE Cr Op Sa Fx

Selectoare de atribute A ( background: url(images/blank.png) 0 6px no-repeat; /* Parametri imagine de fundal */ padding-left: 15px; /* Deplasare text la dreapta */ )

Rezultatul exemplului este prezentat mai jos (Figura 13.2).

Orez. 13.2. Schimbați stilul elementului în funcție de valoarea țintă

În acest exemplu, o imagine este adăugată la link folosind proprietatea de fundal. Funcțiile sale includ crearea unei repetări imagine de fundal

, dar repetarea fundalului poate fi anulată folosind valoarea fără repetare, care va avea ca rezultat o singură imagine.

Valoarea atributului începe cu un anumit text

Setează stilul pentru un element dacă valoarea atributului etichetei începe cu textul specificat. Sintaxa aplicației este următoarea.
[atribut^="valoare"] (Descrierea regulilor de stil)

Selector[atribut^="valoare"] ( Descrierea regulilor de stil )

În primul caz, stilul este aplicat tuturor elementelor ale căror valori ale atributelor încep cu textul specificat. Și în al doilea - doar anumitor selectori. Utilizarea ghilimelelor este opțională, dar numai dacă valoarea conține litere latine și fără spații. Să presupunem că site-ul dvs. trebuie să separe stilul link-urilor obișnuite și externe - link-uri care duc la alte site-uri. Pentru a nu intra în etichetă noua clasa , să folosim selectori de atribute. Legăturile externe se caracterizează prin adăugarea unui protocol la adresă, de exemplu, protocolul HTTP este folosit pentru a accesa documente hipertext. De aceea link-uri externe începe cu cuvânt cheie

HTML5 CSS 2.1 IE Cr Op Sa Fx

http:// , și îl adăugăm la selectorul A, așa cum se arată în exemplul 13.3.