Snelle tip CSS-specificiteit begrijpen

De "C" in CSS staat voor cascading. Dit betekent dat de stijlregels die later in de stylesheet worden weergegeven, regels negeren die eerder worden weergegeven. Maar dit is niet altijd het geval. Er is nog iets anders waar u rekening mee moet houden: specificiteit. In deze snelle tip laat ik je zien hoe je dat precies doet.

Specificiteitsregels

CSS-specificiteit is eigenlijk dit: hoe specifieker je selector is, hoe meer voorrang het heeft. Om te weten welke selectors meer waard zijn, gebruikt u dit systeem:

• Geef elke HTML-elementselector 1 punt. Voorbeeld: p
• Geef elke klassenkiezer 10 punten. Voorbeeld: .column
• Geef elke id-selector 100 punt. Voorbeeld: # wrap
• Tel de punten op voor elk onderdeel van de selector om de volledige waarde van de selector te krijgen.

Bijvoorbeeld

 #test background: red;  / * specificiteit: 100 * / .item p background: green;  / * specificiteit: 10 + 1 = 11 * / p achtergrond: oranje;  / * specificiteit: 1 * / body # wrap p background: geel;  / * specificiteit: 1 + 100 + 1 = 102 * /