[CSS 3] CSS Specificity

发布时间 2023-06-20 14:34:56作者: Zhentiw

 

So higher rank css will override lower rank css rules.

Inline styles will override any other css rules.

 

h1:not(.small-text) // 0011 - :not is not counted as pseudo class element
div h1:first-child // 0012 - 2 tags, 1 pseudo-class
div h1.larget-text::before // 0013 - 2 tag + 1 pseudo-element ::before, 1 class
.larget-text:nth-child(1) // 0020 - .larget-text is class, :nth-child is pseudo-class
h1.larget-text[id="title"] // 0021 - 1 attribute + 1 class, 1 tag
h1.larget-text#title // 0111 - 1 id, 1 class, 1 tag