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

 

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

做者：Vitaly Friedman

译者：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. 若是两个选择器同时做用到一个元素上，权重高者生效。

权重等级

每一个选择器在权重级别中都有本身泾渭分明的位置。根据选择器种类的不一样能够分为四类，也决定了四种不一样等级的权重值。

一、行内样式，指的是html文档中定义的style

行内样式包含在你的html中 对你的元素产生直接做用，好比:

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

二、ID选择器

Id也是元素的一种标识，好比#div

三、类，属性选择器和伪类选择器

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

四、元素和伪元素

元素跟伪元素选择器，好比:before 与 :after.

 

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

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

详细请参阅【Pseudo-elements】

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

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

扩展阅读：

1. 如何给伪元素绑定事件
2. w3c规范中的伪元素

99

 

若是您对CSS选择器还不太了解，或者说不太清楚CSS有哪些选择器，我的建议你先阅读如下几篇文章，这样更有助于帮助你阅读本文后面的内容：

1. 《CSS3基本选择器》
2. 《CSS3属性选择器》
3. 《CSS3伪类选择器》
4. 《CSS选择器优化》

大漠

若是你还分不清楚这些是怎么分类的，你能够看一下文章末尾的一个简短的分类。

怎么肯定权重

权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1.好比

body #content .data img:hover

最终的权重值是0122；#content是一个id选择器加了100，.data是一个class类选择器加了10，：hover伪类选择器加了10， body和img是元素加了1 。详细参阅【CSS Specificity】

另外一种方法：计算有几个id选择器的数量为a ,计算其余属性跟class选择器的数量为b ，计算元素名跟伪元素名的数量为c ，而后结合起来就是权重。详细参阅【CSS Selector Specificity]】

为了帮助我更好的理解权重的概念，我制做了一张西斯人物能量表（你们能够自动类比为各类赛亚人，奥特曼战斗力对照表）每一个角色（选择器）都拥有西斯能量（权重值，就跟赛亚人的战斗力同样），这个决定了这我的在黑暗势力里有多牛逼，也决定了css规则在你的样式表里有多牛逼。详细参阅【CSS Specificity Wars – Cheat Sheet】

权重计算测试

利用第一个规则能够很容易计算权重，你能够本身试试看看掌握了没

01. *{}                         ====》0 02. li{}                        ====》1(一个元素) 03. li:first-line{}             ====》2(一个元素，一个伪元素) 04. ul li {}                    ====》2（两个元素） 05. ul ol+li{}                  ====》3（三个元素） 06. h1+ *[rel=up] {}            ====》11（一个属性选择器，一个元素） 07. ul ol li.red{}              ====》13（一个类，三个元素）
08. li.red.level{}              ====》21（两个类，一个元素）
09. style="" ====》1000(一个行内样式) 10. p {}                        ====》1（一个元素） 11. div p {}                    ====》2（两个元素） 12. .sith {}                    ====》10（一个类） 13. div p.sith{}                ====》12（一个类，两个元素） 14. #sith{} ====》100（一个ID选择器） 15. body #darkside .sith p {} ====》112(1+100+10+1,一个Id选择器，一个类，两个元素)

权重的基本规则

一、相同的权重：之后面出现的选择器为最后规则：

假如在外部样式表中，同一个CSS规则你写了两次，那么出如今前面的选择器权重低，你的样式会选择后面的样式：

#content h1 { padding: 5px; } #content h1 { padding: 10px; }

两个选择器的权重都是0，1，0，1，最后那个规则生效。

二、不一样的权重，权重值高则生效

选择器可能会包含一个或者多个与权重相关的计算点，若通过计算获得的权重值越大，则认为这个选择器的权重高。详细参阅【Understanding Specificity】

CSS权重规则

一、包含更高权重选择器的一条规则拥有更高的权重。详细参阅【Understanding Specificity】

二、Id选择器的权重比属性选择器高,好比下面的例子里 样式表中#p123的权重明显比[id=p123]的权重要高。

A: a#a-02 { background-image : url(n.gif); } and B: a[id="a-02"] { background-image : url(n.png); }

所以A规则比B规则的权重要高。详细参阅【W3C CSS 2.1 Specification】

三、带有上下文关系的选择器比单纯的元素选择器权重要高。这条规则一样也适用于含有多个元素的选择器。详细参阅【Cascade Inheritance】

四、与元素“挨得近”的规则生效，好比css中咱们定义了如下的规则，

#content h1 { padding: 5px; }

但html 中也定义了规则：

<style type="text/css"> #content h1 { padding: 10px; } </style>

Html中定义的规则由于跟元素挨得比较近，因此生效。详细参阅【Understanding Specificity】

五、最后定义的这条规则会覆盖上面与之冲突的规则。好比下面的例子：

p { color: red; background: yellow } p { color: green }

段落会呈现绿色的文字。固然也会出现黄色的背景，由于第一条规则只是被覆盖了color属性。详细参阅【BrainJar.com】

六、不管多少个元素组成的选择器，都没有一个class选择器权重高。好比说“.introduction”高于“html body div div h2 p”。详细参阅【CSS Specificity for Poker Players】

七、通配符选择器也有权重，权重被认为是 0，0，0，0。好比 *， body * 被继承的css属性也带有权重，权重是0，0，0，0。详细参阅【CSS Specificity Clarified】

权重的例子

考虑三个代码片断：

A: h1 B: #content h1 C: <div id="content"> <h1 style="color: #fff">Headline</h1> </div> 

A的权重是0,0,0,1 (一个元素),B的权重是0，1，0，1（一个id选择器，一个元素），c的权重是1，0，0，0 ，这是一个行内样式。

由于0001 = 1 < 0101 = 101 < 1000,第三个规则权重最高，所以第三个规则将会生效。若去掉第三个规则，第二个规则将会生效。

权重实战

一、利用LVHA原理来给连接应用样式：若是你想展示不一样状态的连接样式，必定要记住link-visited-hover-active的顺序，或者简写为LVHA。详细参阅【Link Specificity】

二、永远都不要使用“!important”：“若是你遇到了权重问题，第一个解决方法确定是去掉“!important”，“!important”会覆盖全部的样式规则，但“!important”根本没有结构与上下文可言，因此不多用到。详细参阅【Understanding Specificity、Selector Specificity】

三、利用id增长选择器权重：利用ul#blogroll a.highlight代替a.highlight ，权重由0, 0, 1, 1 变成了0, 1, 1, 2。

四、减小选择器的个数：“在css规则中尽量的使用较少的选择器”。详细阅读【Understanding Specificity】

CSS权重计算工具及资源

一、扑克牌权重计算法

若是你以前没有编程经验，css让你看得比较晕，这个比喻能够帮你把一些概念弄得更清楚。把css规则做为你手中的牌，最好的一套牌决定了你最终的样式。

二、Css权重计算器

计算这个选择器的权重

三、Understanding Specificity Tutorial

在这个教程中，你会关注权重。css权重关系到你的css规则是怎样显示的。你样式表中的每条ｃｓｓ规则都带有一个权重，这个权重级别是由不一样的选择器加权计算的，经过权重，不一样的样式最终会做用到你的网页中。

四、Cascade Inheritance: Specificity

这里会对权重问题进行一番讨论。这些规则不只仅存在于一张样式表中，也有多是多张样式表。首先要明白，一个元素能够被多个规则定义样式。

五、CSS 2.1 Selectors Explained

对css2.1选择器的一个全面的阐述。经过详尽的了解css2.1的选择器，能够很大程度上优化你的html，好比减小没必要要的class属性，增长大量的div或者span标签等。

六、CSS Specificity Bugs in IE

Ie中权重bug的一个简短概述

七、CSS Structure and Rules

基本的css语法，伪类及伪元素，还有层叠规则。

八、Specificity

他看上去不怎么重要，你也可能一直用不上，可是在大的项目中，你的CSS文件变得愈来愈大，那么这个时候你的CSS就有可能会产生冲突。

什么是什么？

一、一个选择器给元素定义了一个独特的样式。

p { padding: 10px; }

二、一个类选择器利用类(在页面中可能会有多个)定义选择器

p.section { padding: 10px; }

三、一个id选择器利用页面中惟一一个id标识符定义一个选择器

CSS: #section { padding: 10px; } (X)HTML: <p id="section">Text</> 

四、上下文选择器能够定义一个带有层级关系顺序的规则

p span { font-style: italic; }

上面这一条，全部在p元素中的span元素将会被应用样式"font-style: italic;"。

五、一个属性选择器匹配了一个带有特殊属性或者属性的值的元素

p[title] { font-weight: bold; }

匹配全部带有title属性的元素

六、伪类，是一种特殊的ｃｌａｓｓ，用来定义ｈｔｍｌ元素的行为。通常都是用来给一些ｈｔｍｌ元素的特定状态定义特殊效果。当触发这个状态时，效果也会生效。

a:visited { text-decoration: underline; }

七、伪元素，让设计者能够给实际不存在于文档中的内容定义样式。伪元素属于特殊的元素，能够利用伪元素来“凭空”生成内容，列表项的数字等。

p:first-line { font-variant: small-caps; } a:link:after { content: " (" attr(href) ")"; }

 

上面罗列的是CSS选择器中的七种，但实际上CSS的选择器是不仅这些，特别是CSS3，在CSS2.1的基础上增长了些颇有意思的选择器，在不须要类名的状况下都能帮你选择到须要的元素。感兴趣的话能够阅读下列的文章：

1. 《CSS3基本选择器》
2. 《CSS3属性选择器》
3. 《CSS3伪类选择器》
4. 《CSS选择器优化》

大漠

译者手语：初次翻译前端技术博文，整个翻译依照原文线路进行，并在翻译过程略加了我的对技术的理解。若是翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文原文：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know

中文译文：http://www.w3cplus.com/css/css-specificity-things-you-should-know.html