Prioritate în css, lecții, webreference

Un element HTML poate fi ținta mai multor reguli CSS. Să folosim un paragraf simplu ca exemplu:

Putem schimba acest paragraf pur și simplu folosind numele etichetei:

Sau putem folosi numele clasei:

Sau putem folosi identificatorul:

Deoarece browser-ul poate alege doar o singură culoare și se aplică la prezentul alineat, aceasta va decide ce regulă CSS are prioritate față de celălalt. Aceasta se numește prioritate în CSS (sau specificitate).

În exemplul nostru paragraful va fi roșu. deoarece identificatorul este mai specific și, prin urmare, mai important. decât alți selectori.

Ordinea regulilor CSS

Dacă CSS are aceleași selectori, atunci ultima va avea prioritate.

Computing 100

Există o modalitate rapidă de a afla dacă regula CSS este "puternică", prin calcularea specificității selectorilor:

Selectorul cu cel mai mare "scor" va prevala, indiferent de ordinea în care apar regulile CSS.

Regula # introducere este mai specifică. decât alții, deoarece identificatorii trebuie să fie unici pe întreaga pagină web, astfel încât nu poate fi decât un element țintă.

mesaj va fi direcționat către orice element HTML cu atributul class = "message" și, prin urmare, mai puțin specific. Același lucru este valabil și pentru p . care poate viza orice paragraf.

Cum să evitați conflictele

În timp ce scrieți CSS, puteți avea cu ușurință reguli conflictuale. în care aceeași proprietate este aplicată de mai multe ori.

Pentru a evita acest lucru:

• aplicați numai clasele. utilizați introducerea în loc de #introducție. Chiar dacă acest element apare pe pagina dvs. web o singură dată;
• Evitați aplicarea mai multor clase unui element HTML: nu scrieți

  . și

  . care este mai descriptivă din punct de vedere semantic;

• nu utilizați stiluri încorporate. cum ar fi
  .

Articole similare

• Fedortsev Andrey - actori ruși și sovietici