Snabbtips Förstå CSS-specificitet

"C" i CSS står för cascading. Det betyder att de stilregler som visas senare i stilarket kommer att åsidosätta regler som visas tidigare. Men det här är inte alltid fallet. Det finns också något annat du måste ta hänsyn till: specificitet. I det här snabba tipset visar jag dig hur du gör just det.

Specificitetsregler

CSS Specificitet är i grunden detta: ju mer specifika din väljare är desto mer företräde kommer det att ha. För att ta reda på vilka väljare som är värda mer, använd det här systemet:

• Ge varje HTML-elementväljare 1 poäng. Exempel: s
• Ge varje klassväljare 10 poäng. Exempel: kolumn
• Ge varje idväljare 100 poäng. Exempel: #wrap
• Lägg upp poängen för varje del av väljaren för att få valet av valet.

Till exempel

 #test bakgrund: röd;  / * specificitet: 100 * / .item p bakgrund: grön;  / * specificitet: 10 + 1 = 11 * / p bakgrund: orange;  / * specificitet: 1 * / body #wrap p bakgrund: gul;  / * specificitet: 1 + 100 + 1 = 102 * /