Rask tips Forstå CSS-spesifisitet

"C" i CSS står for gripende. Dette betyr at de stilreglene som vises senere i stilarket, tilsidesetter regler som tidligere vises. Men dette er ikke alltid tilfelle. Det er noe annet du må ta hensyn til, også: spesifisitet. I dette raske tipset vil jeg vise deg hvordan du gjør nettopp det.


Spesifisitetsregler

CSS Specificitet er i utgangspunktet dette: Jo mer spesifikk selektoren din er, desto større forrang vil det ha. For å finne ut hvilke valg som er verdt mer, bruk dette systemet:

  • Gi hver HTML elementvelger 1 poeng. Eksempel: s
  • Gi hver klassevelger 10 poeng. Eksempel: .kolonne
  • Gi hver idvelger 100 poeng. Eksempel: #wrap
  • Legg opp poengene for hvert stykke velgeren for å få fullverdien til velgeren.

For eksempel

 #test bakgrunn: rødt;  / * spesifisitet: 100 * / .item p bakgrunn: grønn;  / * spesifisitet: 10 + 1 = 11 * / p (bakgrunn: oransje;  / * spesifisitet: 1 * / body #wrap p bakgrunn: gul;  / * spesifisitet: 1 + 100 + 1 = 102 * /