您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > CSS

CSS 权重详解

时间:2019-11-01 14:32:24  来源:  作者:

对于 csser 来说,多多少少都会遇到过 “样式规则不生效?”、“样式规则被覆盖?” 等等问题,这些都与 CSS 权重有关系。

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取

选择器匹配原理

在此之前,容我先简单介绍浏览器是怎么通过各种选择器,把样式规则和 DOM 元素扯上关系的。

浏览器中存在着专门的渲染引擎来渲染 html 文档。这里以 Webkit 内核为例,在启动渲染流程时,引擎一方面会解析 HTML 文档,构建 DOM 节点树(DOM Tree),另一方面会解析样式文件生成 样式规则(Style Rules),然后结合分析 DOM 树和样式规则生成 渲染树(Render Tree),最后 布局 和 绘制 出 UI 界面。

CSS 权重详解

 

Webkit 渲染流程(摘自 https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)

CSS 的选择器匹配就发生在 渲染树 的构建过程。浏览器会从 DOM 树的根节点开始遍历每个可见节点,对于每个可见节点都会在规则表中查找适配的样式规则。那么,如此庞大的样式数据和复杂的选择器结构,渲染引擎是怎么寻找到适配当前元素的样式规则呢?

请看下面这个复合选择器。如果引擎是按照从左向右的顺序匹配选择器,将会导致大量 回溯的发生:先是在当前节点到 DOM 树跟节点的路径上寻找 div 元素,然后沿着分支路径继续往下找第二个 div 元素,如果当前路径找不到,就得回退到上一个 div 元素尝试另一条分支路径。如此往复,对性能损耗将会非常严重。

div div span .text {}

所以,引擎是采取 从右向左 的顺序来匹配选择器。也就是 从最具体的选择器开始,如果与当前节点不匹配,则直接抛弃该条规则;如果匹配,只需要沿着路径往上确认其他选择器是否也匹配,这样做可以大大减少无效的匹配数,提高性能。除此之外,引擎还会把不同类型的选择器(id、class、tag 及其他类型)归类到哈希表中,进一步减少查找基数。

了解选择器的匹配原理,有利于我们理解其权重规则,对于编写简洁、高效的 CSS 代码非常有帮助。

CSS 权重

通过不同的方式(内联样式、外部样式表)、不同类型的选择器组合针对某个元素声明样式规则时,如何决定最终哪个声明会被应用到元素上?这就涉及到 CSS 权重(也指优先级,Specificity)

围绕 CSS 权重主要有以下三条规则:

  • 权重不同的样式规则作用于同一元素时,权重高的规则生效;
  • 权重相同的样式规则作用于同一元素时,后声明的规则生效;
  • 选择器在 DOM 中的位置关系不会对规则产生影响。
<html>
 <head>
 <style>
 body div {
 color: red;
 }
 html div {
 color: blue;
 }
 </style>
 </head>
 <body>
 <div>测试</div>
 </body>
<html>
  •  
CSS 权重详解

 

  •  
  • 这里的 body 标签元素在 DOM 中离目标 div 更近,但最后还是按照样式规则的声明顺序来决定。
  • 直接作用于元素的样式规则优先级高于从祖先元素继承的规则;
<html>
 <head>
 <style>
 #parent {
 color: red;
 }
 span {
 color: blue;
 }
 </style>
 </head>
 <body>
 <div id="parent">
 <span>测试</span>
 </div>
 </body>
<html>
  •  
CSS 权重详解

 

  •  

CSS 权重等级

如何比较不同选择器的权重高低?这里划分成 5 个权重等级,按照等级 由高到低 的顺序:

  • !important 关键字
  • 内联样式
<div style="color: #fff;">测试</div>

id 选择器

#demo {}

类选择器属性选择器伪类选择器

.demo {}
[type="text"] {}
div:hover {}
div:first-child {}

需要注意,否定伪类(:not())比较特殊,它不会对权重产生影响,但是 否定伪类内部的选择器会影响权重

<html>
 <head>
 <style>
 div#demo span {
 color: red;
 }
 div:not(#demo) span {
 color: blue;
 }
 </style>
 </head>
 <body>
 <div id="demo">
 <span>普通 demo</span>
 <div id="pseudo">
 <span>否定伪类 demo</span>
 </div>
 </div>
 </body>
<html>
  •  
CSS 权重详解

 

  •  
  • 实例中,:not(#demo) 的权重值和 #demo 的权重值是相等的,所以后面声明的样式规则成功生效。
  • 标签选择器伪元素选择器
div {}
div:before {}
div:after {}

除了上述的选择器之外,通配符选择器(*) 和 结合符(+、>、~)对优先级没有影响。

对于复杂的复合选择器,我们需要逐个等级比较权重大小,不允许跨越等级比较。为了方便计算,我们可以把权重值具象化,每出现一个选择器就在其对应的等级区间中权重值加 1,参考下面实例:

* {} /* 权重值 0-0-0-0-0 */
div {} /* 权重值 0-0-0-0-1 */
div h1+h2 {} /* 权重值 0-0-0-0-3 */
div, ... div {} /* 权重值 0-0-0-0-n */
#demo a:hover {} /* 权重值 0-0-1-1-1 */

国外大神 把 CSS 权重的计算模拟成海洋生物链,选择器组合权重越大则在生物链位置越高,非常浅显生动,建议收藏。

CSS 权重详解

 

图片转自 https://specifishity.com/

建议

在充分了解 CSS 选择器匹配原理和权重规则之后,在编写 CSS 代码时不妨多注意以下细节:

  • 尽量不要使用 !important,尤其是在 对外提供的插件 和 全站范围的样式表 中,这会对模块代码中的样式覆盖带来非常大的麻烦。
  • !important 关键字的权重值为 1-0-0-0-0,只需要按照权重规则继续累加权重值即可覆盖该样式属性。
<html>
 <head>
 <style>
 div {
 color: red !important;
 }
 /* 通过 id选择器 增加权重 */
 #demo {
 color: blue !important;
 }
 </style>
 </head>
 <body>
 <div id="demo">测试</div>
 </body>
<html>

减少不必要的选择器嵌套,嵌套最好不要超过三级。大量的复合选择器,会影响选择器匹配的效率,同时也会增加 CSS 样式文件的体积,不易维护。

当出现大量嵌套时,我们可以指定一个更具体的类选择器来替换复合选择器。

body div ul li span {}
.li {}


Tags:CSS   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关推荐
其实文章原名叫做 “碰到不支持 flex 的项目怎么办?”现在差不多已经是 flex 的天下了,简单灵活,但有时还是不可避免地会接触到 IE 浏览器,比如我最近接触的 阅文作家专区 (qq....【详细内容】
2021-06-17  Tags: CSS  点击:(25)  评论:(0)  加入收藏
什么是css的调用方式?简单来讲,就是解决把css代码写在哪里的问题,这块内容之前在课堂上演示过,这里再用文字说明一下,权当复习。大体有以下四种方式: 外联式样式表; 内嵌样式表; 元...【详细内容】
2021-05-27  Tags: CSS  点击:(58)  评论:(0)  加入收藏
在 mac 文件管理中有这样一个小细节。 当文件名不超过一行时,完整显示,此时鼠标放上去无任何提示 当文件名超过一行时,出现省略号,此时鼠标放上去提示显示完整文件名 一个很微...【详细内容】
2021-05-25  Tags: CSS  点击:(54)  评论:(0)  加入收藏
多行文本展开收起是一个很常见的交互, 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当...【详细内容】
2021-05-21  Tags: CSS  点击:(72)  评论:(0)  加入收藏
作为Web开发人员应避免的10种CSS做法!有人认为CSS很难学习,没有什么逻辑可言,而且还坑很多,可能是大家对CSS还不是很了解,因为我提出了五个我不喜欢的开发者习惯,并向大家展示如...【详细内容】
2021-05-12  Tags: CSS  点击:(80)  评论:(0)  加入收藏
以下代码来源 https://tobiasahlin.com/spinkit/为了怕源文件删除,我抄录了几个.....1、加载方块(是我喜欢的效果) //html<div class="spinner"></div>//css.spinner { widt...【详细内容】
2021-05-07  Tags: CSS  点击:(73)  评论:(0)  加入收藏
前言在写过一段时间 CSS 之后,大家对于常见的属性应该都很熟悉,例如最基本的 display、position、padding、margin、border、background 等等,在写 CSS 的时候不需要特别查什...【详细内容】
2021-04-27  Tags: CSS  点击:(93)  评论:(0)  加入收藏
1. 关于pxpx想必大多数人都知道是像素pixel的缩写, px也就是以像素为单位.2. 关于 vw 和 vh 2.1 关于 视口(Viewport)讲到vw和vh, 它们在CSS3规范中都是视口单位(Viewport u...【详细内容】
2021-04-25  Tags: CSS  点击:(106)  评论:(0)  加入收藏
前言在日常项目开发中,在布局方面有遇到哪些问题了?今天来一起看看CSS布局有哪些小技巧,后续开发更轻松。本文主要通过简单的示例,讲述开发中遇到的布局等问题,但不仅限于布局相...【详细内容】
2021-04-14  Tags: CSS  点击:(116)  评论:(0)  加入收藏
作者:幻灵尔依 (授权原创)https://juejin.im/post/5e0fef935188253a624a6a72《css揭秘》中讲了47个css技巧,其中有很多日常编码中并不会用到,本文除了将书中部分实用技巧罗列...【详细内容】
2021-04-08  Tags: CSS  点击:(137)  评论:(0)  加入收藏
▌简易百科推荐
其实文章原名叫做 “碰到不支持 flex 的项目怎么办?”现在差不多已经是 flex 的天下了,简单灵活,但有时还是不可避免地会接触到 IE 浏览器,比如我最近接触的 阅文作家专区 (qq....【详细内容】
2021-06-17  XboxYan    Tags:CSS   点击:(25)  评论:(0)  加入收藏
什么是css的调用方式?简单来讲,就是解决把css代码写在哪里的问题,这块内容之前在课堂上演示过,这里再用文字说明一下,权当复习。大体有以下四种方式: 外联式样式表; 内嵌样式表; 元...【详细内容】
2021-05-27  欢乐码  今日头条  Tags:CSS   点击:(58)  评论:(0)  加入收藏
在 mac 文件管理中有这样一个小细节。 当文件名不超过一行时,完整显示,此时鼠标放上去无任何提示 当文件名超过一行时,出现省略号,此时鼠标放上去提示显示完整文件名 一个很微...【详细内容】
2021-05-25  XboxYan  今日头条  Tags:CSS   点击:(54)  评论:(0)  加入收藏
多行文本展开收起是一个很常见的交互, 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当...【详细内容】
2021-05-21  XboxYan  今日头条  Tags:CSS   点击:(72)  评论:(0)  加入收藏
作为Web开发人员应避免的10种CSS做法!有人认为CSS很难学习,没有什么逻辑可言,而且还坑很多,可能是大家对CSS还不是很了解,因为我提出了五个我不喜欢的开发者习惯,并向大家展示如...【详细内容】
2021-05-12  趣动云  今日头条  Tags:CSS   点击:(80)  评论:(0)  加入收藏
以下代码来源 https://tobiasahlin.com/spinkit/为了怕源文件删除,我抄录了几个.....1、加载方块(是我喜欢的效果) //html<div class="spinner"></div>//css.spinner { widt...【详细内容】
2021-05-07  is芳小芳  今日头条  Tags:css   点击:(73)  评论:(0)  加入收藏
前言在写过一段时间 CSS 之后,大家对于常见的属性应该都很熟悉,例如最基本的 display、position、padding、margin、border、background 等等,在写 CSS 的时候不需要特别查什...【详细内容】
2021-04-27  前端小混混  前端先锋  Tags:CSS   点击:(93)  评论:(0)  加入收藏
1. 关于pxpx想必大多数人都知道是像素pixel的缩写, px也就是以像素为单位.2. 关于 vw 和 vh 2.1 关于 视口(Viewport)讲到vw和vh, 它们在CSS3规范中都是视口单位(Viewport u...【详细内容】
2021-04-25    今日头条  Tags:CSS   点击:(106)  评论:(0)  加入收藏
前言在日常项目开发中,在布局方面有遇到哪些问题了?今天来一起看看CSS布局有哪些小技巧,后续开发更轻松。本文主要通过简单的示例,讲述开发中遇到的布局等问题,但不仅限于布局相...【详细内容】
2021-04-14  web秀  今日头条  Tags:CSS   点击:(116)  评论:(0)  加入收藏
作者:幻灵尔依 (授权原创)https://juejin.im/post/5e0fef935188253a624a6a72《css揭秘》中讲了47个css技巧,其中有很多日常编码中并不会用到,本文除了将书中部分实用技巧罗列...【详细内容】
2021-04-08  Echa攻城狮  今日头条  Tags:CSS   点击:(137)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条