选择器优先级

0级

  • 通配选择器（*）
  • 选择符（+、>、~）
  • 和逻辑组合伪类（:not()、:is()、:where），逻辑组合伪类本身并不影响CSS优先级，影响优先级的是括号里面的选择器

1级

  • 标签选择器
    1. body{color:#333}

2级

  • 类选择器
  • 属性选择器
  • 伪类
  1. .foo {color:#666}
  2. [foo] {color:#666}
  3. :hover {color:#666}

3级

  • id选择器
    1. #foo{color:#999}

4级

  • style属性内联
    1. <span style="color:#ccc"></span>

5级

  • important
    1. .foo{color:#fff !important}

优先级计算

选择器 计算值 计算细则
* {} 0 1个0级通配选择器，优先级数值为0
dialog {} 1 1个1级标签选择器，优先级数值为1
ul > li {} 2 2个1级标签选择器，1个0级选择符，优先级数值为1+0+1
li > ol + ol {} 3 3个1级标签选择器，2个0级选择符，优先级数值为1+0+1+0+1
.foo{} 10 1个2级类名选择器，优先级数值为10
a:not([rel=nofollow]){} 11 1个1级标签选择器，1个0级逻辑伪类选择器，1个2级属性选择器，优先级数值为1+0+10
a:hover{} 11 1个1级标签选择器，1个2级伪类选择器，优先级数值为1+10
ol li.foo{} 12 2个1级标签选择器，一个2级类选择器，优先级数值为1+1+10
li.foo.bar{} 21 1个1级标签选择器，2个2级类选择器，优先级数值为1+10+10
#foo{} 100 1个3级ID选择器，优先级数值为100
#foo .bar p{} 111 1个3级ID选择器，1个2级类选择器，1个1级标签选择器，优先级数值为100+10+1

后来居上

如果选择器的计算值相同则后来居上

demo

  1. <html lang="zh-CN">
  2.     <body class="foo">颜色是？</body>
  3. </html>
  5. body.foo:not([dir]){color:red}
  6. html[lang] > .foo{color:blue}
  • body.foo:not([dir])

1个1级标签选择器，1个2级类选择器，1个0级逻辑伪类选择器，1个2级属性选择器[dir]，优先级计算值也就是
21

  • html[lang] > .foo

1个1级标签选择器，1个2级属性选择器，1个0级选择符>，1个2级类选择器，优先级计算值21

颜色是蓝色
后来居上准则