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

发布于 2017-11-28 字数 1332 浏览 1622 评论 0

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

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

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

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

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

样式 分组情况 得分
#head 0,1,0,0 0100
.nav a 0,0,1,1 0011
#head .ad 0,1,1,0 0110

说明:

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

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!