A-A+

什么是CSS权重?一文弄懂css的权重

2018年09月26日 css, 前端基础 评论 3 条

CSS权重

我们先来看一个初学者常遇见的一个场景。

假设我们正在码前端代码,要做一个网站或者web应用的功能,但我们引用的组件库样式不适合我们,这时需要对组件样式进行一些重写。于是打开开发者工具,获取要修改的元素的类名,并编写一些新的CSS。看上去太简单啦,三下两下就搞完了。但是,刷新页面后,没有进行任何更改, 或者有些更化,但不是全部如我们预期的。也许颜色会改变,但给予元素的margin-left:auto保持不变。

这通常是因为CSS权重。举个栗子:

a {
color:#f00;
}

这个选择器的权重就很低,因为它只是针对'a元素进行样式修饰。让我们提高它的权重。我们给它增加一级选择器。

.hello a {
color:#f00;
}

然后我们还可以给.hello再增加一层选择器,这样权重就会更高。像下面的例子:

div  .hello a {
color:red;
}
.hello a {
color:blue;
}

上面的例子中,有两层选择器的虽然在下面出现,但它的权重没有三层选择器的高,所以,a的颜色还是红色的。

CSS选择器是如何工作的?

在开始我们往下的学习前,我们先来弄明白,CSS选择器是如何工作的,并且浏览器是如何使用它们的。和我们的阅读习惯正好相反,CSS选择器是从右到左阅读的

html #home-page header#banner .site-nav > ul li a {
color: blue;
}

浏览器会索引页面上的每个DOM节点:

  1. 开始目标搜索;
  2. 查找页面上的a元素;
  3. 查找a子集下面,父元素是li的集合;
  4. 查找li a 集合下,父元素是.site-nav的集合;
  5. 查找.site-nav > ul li a集合下,父元素是header且id是banner的;
  6. 查找header#banner .site-nav > ul li a集合下,父元素id是home-page的;
  7. 查找6集合中,父元素是html的集合;
  8. 将样式应用到7的集合上去。

当然,这个是比较极端的例子,但如果用sass来预编译的话,还是较容易的找到选择器的。
我们再来看看,用BEM风格的例子:

.site-nav__link {
colore:blue;
}

目标搜索现在看起来更像是这样的:

  1. 开始目标搜索
  2. 使用site-nav__link类查找页面上的每个元素
  3. 将样式应用于目标

通过使用没有嵌套的单个类选择器:

  • 目标搜索从大量DOM遍历的8个步骤减少到仅3个步骤
  • 我们大大减少了改变目标风格所需的条件数量

我们还帮助未来的开发人员理解我们留下的代码--BEM符号,表明我们在site-nav块的上下文中构建了一个link元素。

计算CSS的权重

现在我们已经理解了选择器权重的含义,然后可以来计算出css的数字权重。

它的工作原理如下:

  • 元素和伪元素(a,div,body,:before,:after)得分为1
  • 类和属性选择器(.element,[type =“text”])得分为10
  • ID(#header)得分为100
  • 内联样式得分为1000
  • !important是最高权重(它甚至比内联样式权重还高,并且只能由级联覆盖)

来看这个例子:

html #home-page header#banner .site-nav > ul li a {
color: blue;
}

这个选择器有:

  • 5个元素(5)
  • 1class(10)
  • 2个ID(200)

给它的总特异性评分为215。您必须编写具有相同或更高特异性的规则来覆盖它所应用的样式。

标签:

3 条留言  访客:1 条  博主:1 条   引用: 1 条

  1. jues

    还是第一次听说css权重。 😛

    • wellen

      😛

来自外部的引用: 1 条

  • 我们该使用!important这个CSS样式大杀器吗? | 前端面试题

给我留言

Copyright © 前端面试题 保留所有权利.   Theme  Ality 桂ICP备17012235号-1

用户登录