Viktiga begrepp:
- Inline-stilar
- ID-väljare
- Klassväljare
- Elementväljare
- Specificitetsberäkning
Så beräknar du specificitet:
- Räkna antalet ID-väljare.
- Multiplicera antalet klassväljare med 10.
- Lägg till antalet elementväljare.
- Prioritera regeln med högst specificitet.
Exempel på CSS:
/* Inline-stil */
<p style="color: red;">Text</p>
/* ID-väljare */
#text {
color: blue;
}
/* Klassväljare */
.text {
color: green;
}
/* Elementväljare */
p {
color: black;
}
Specificitetsberäkning:
- Inline-stil: 1000
- ID-väljare: 100
- Klassväljare: 10
- Elementväljare: 1
Resultat: Inline-stilen kommer att prioriteras eftersom den har högst specificitet.
Förbättrad tillgänglighet:
- Använd semantiska element och välj klasser som beskriver innehållet.
- Undvik inline-stilar.
- Organizera CSS med hjälp av ett CSS-preprocessor som SASS eller LESS.