四种 CSS 选择器优先级详细介绍

CSS优先级包含四个级别:文内选择符、ID 选择符、Class 选择符、元素选择符,以及各级别出现的次数。根据这四个级别出现的次数计算得到 CSS 的优先级。

四种 CSS 选择器优先级详细介绍

对优先级的读法,应该是以组来分,这个组之间相互独立,从左到右进行对比。它们成组出现,以逗号分隔。如下表

行内样式ID选择器CLASS选择器标签选择器
1,0,0,00,1,0,00,0,1,00,0,0,1

下面是一些常见的选择器,我们一起来分析他们的优先级:

样式分组情况得分
#head0,1,0,00100
.nav a0,0,1,10011
#head .ad0,1,1,00110

说明:

  1. 得分最高,优先级最大!
  2. 得分相同,后面的属性样式会覆盖前面的属性样式!
  3. !important 声明的样式优先级最高,如果冲突再进行计算。
  4. 继承得到的样式的优先级最低。

以上是 四种 CSS 选择器优先级详细介绍 的全部内容, 来源链接: utcz.com/p/231769.html

回到顶部