四种 CSS 选择器优先级详细介绍 - 文章教程

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

发布于 2017-11-28 字数 1334 浏览 2851 评论 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. 继承得到的样式的优先级最低。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

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

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论