你应该知道的一些事情——CSS权重

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

本文由99根据的《CSS Specificity: Things You Should Know 》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know,以及作者相关信息

作者:

译者:99

除了浮动之外,css权重问题是你要了解的,最复杂的一个概念之一。css每条规则权重的不同,是你所期望的效果,没有通过css规则在元素上生效的主要原因。为了减少调试bug的时间,你需要了解浏览器是怎样解析你的代码的。为了完成这个目标,你需要对权重是如何工作的,有一个清楚的认识。很多Css出现问题的场景,都是某处定义了一个更高权重的规则,导致此处规则不生效。

Css权重问题并不简单,而且有很多或具体或抽象的理论来解释这个问题。本文也将探讨这个问题,我相信如果你喜欢星球大战的话你肯定会理解这些概念的~

我们将会讨论关于css权重的主要问题,包括例子,规则,原理,通用解决方案以及一些资源。

CSS权重:概述

  1. 权重决定了哪一条规则会被浏览器应用在元素上。
  2. 权重的不同,是你所期望的效果,没有通过css规则在元素上生效的主要原因。
  3. 权重的级别划分时包含了所有的css选择器
  4. 如果两个选择器作用在同一元素上,则权重高者生效。
  5. 权重的级别根据选择器被划分为四个分类:行内样式,id,类与属性,以及元素。
  6. 你可以通过CSS权重之争进一步了解CSS权重。
  7. 你也可以通过CSS Specificity for Poker Players进一步了解CSS权重。
  8. 如果两个选择器权重值相同,则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大,会取代前面的CSS规则)
  9. 如果两个选择器权重值不同,则权重大的规则被计算到权重中
  10. 如果一条规则包含了更高权重的选择器,那么这个规则权重更高
  11. 最后定义的规则会覆盖所有跟前面冲突的规则
  12. 内联样式表含有比别的规则更高的权重
  13. Id选择器的权重比属性选择器更高
  14. 你可以使用id来增大权重
  15. 类选择器比任意数量的元素选择器都高
  16. 通配符选择器跟继承来的样式,他们的权重以 0,0,0,0来计算
  17. 你可以用css权重计算器来计算权重。

什么是CSS权重?

  1. 权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。参考阅读【Understanding specificity
  2. 当很多的规则被应用到某一个元素上时,权重是一个决定哪种规则生效,或者是优先级的过程。参考阅读【Selector Specificity
  3. 每个选择器都有自己的权重。你的每条css规则,都包含一个权重级别。 这个级别是由不同的选择器加权计算的,通过权重,不同的样式最终会作用到你的网页中 。参考阅读【Understanding specificity
  4. 如果两个选择器同时作用到一个元素上,权重高者生效。

权重等级

每个选择器在权重级别中都有自己泾渭分明的位置。根据选择器种类的不同可以分为四类,也决定了四种不同等级的权重值。

1、行内样式,指的是html文档中定义的style

行内样式包含在你的html中 对你的元素产生直接作用,比如:

<h1 style="color: #fff;">header</h1>

2、ID选择器

Id也是元素的一种标识,比如#div

3、类,属性选择器和伪类选择器

这一类包括各种class,属性选择器,伪类选择器比如 :hover,:focus等等。

4、元素和伪元素

元素跟伪元素选择器,比如:before 与 :after.

这里我要补充的:伪元素选择器只包含以下几种:

  1. ::after
  2. ::before
  3. ::first-letter
  4. ::first-line
  5. ::selecton

详细请参阅【Pseudo-elements

伪元素跟伪类都是选择器的补充,但是,伪类表示的是一种“状态”比如hover,active等等,而伪元素表示文档的某个确定部分的表现,比如::first-line 伪元素只作用于你前面元素选择器确定的一个元素的第一行。

注意,伪元素选择器选择出来的“部分” 不在dom里,也不能对其绑定事件。如果你对伪元素前面的选择器定义的元素绑定了事件,伪元素同样会生效。 永远记得 伪元素生成的是“表现”。

扩展阅读:

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-specificity-things-you-should-know.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部