Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

CSS 优先级是如何计算的?

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 秒


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步