CSS 优先级是如何计算的?

本贴最后更新于 1433 天前,其中的信息可能已经时移世异

2019-01-03

回答

浏览器通过优先级权重来判断 CSS 属性值与元素之间的关系:权重越高关系越密切,高权重的 CSS 属性值就会赋予到元素上。我们可以把 CSS 分为四类,每类的矩阵权重从高到底排列如下:

  • 内联样式(如:style="font-weight:bold"):[1, 0, 0, 0]
  • ID 选择器(如:#comments):[0, 1, 0, 0]
  • 类选择器(如:.footer),属性选择器(如:[src$=".pdf"]),伪类(如::active):[0, 0, 1, 0]
  • 类型选择器(如:h1),伪元素(如:::before):[0, 0, 0, 1]

示例:

// 高权重 [0, 1, 0, 0] 
#footer {...}
// 低权重 [0, 0, 2, 1] 
.footer.fn__flex::before {...}

加分回答

  • CSS 优先级是基于每列进行比对的,例如 ID 选择器的优先级总是高于多个类选择器叠加后的优先级。
  • 如果多个选择器组合的优先级相等时,则会选择文件中靠后的那一组选择器属性值对元素进行渲染。
  • 通配选择器(*),关系选择器(+, >~, ),否定伪类(:not())对优先级没有影响。但是,在 :not() 内部声明的选择器将会受到优先级影响。
  • 在 CSS 属性值后添加 !important 会导致优先级无效,元素会优先使用该属性值。但如果两组选择器中的同一属性值都添加了 !important,则会使用优先级高的那一组选择器中的属性值。
  • 我们应减少 !important 的使用,否则被破坏了的优先级将让 debug 非常困难。除此之外,覆盖 !important 属性值的代码也不太美观。

返回总目录

每天 30 秒

  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1101 引用 • 3468 回帖 • 398 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    174 引用 • 428 回帖 • 1 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    317 引用 • 1392 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
Vanessa
我们终此一生,就是要摆脱他人的期待,找到真正的自己。 昆明