CSS

CSS权重

CSS Specificity

Posted by huangqing on August 12, 2016

CSS权重

CSS权重：概述

  • 权重决定了哪一条规则会被浏览器应用在元素上。

  • 权重的不同，是所期望的效果没有通过css规则在元素上生效的主要原因。

  • 权重的级别划分时包含了所有的css选择器。

  • 如果两个选择器作用在同一元素上，则权重高者生效。

  • 权重的级别根据选择器被划分为四个分类：行内样式，id，类与属性，以及元素。

  • 两个选择器权重值相同，则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大，会取代前面的CSS规则)

  • 两个选择器权重值不同，则权重大的规则被计算到权重中

  • 一条规则包含了更高权重的选择器，那么这个规则权重更高

  • 最后定义的规则会覆盖所有跟前面冲突的规则

  • 内联样式表含有比别的规则更高的权重

  • Id选择器的权重比属性选择器更高

  • 你可以使用id来增大权重

  • 类选择器比任意数量的元素选择器都高

  • 通配符选择器跟继承来的样式，他们的权重以 0，0，0，0来计算

什么是CSS权重？

权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。

当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程。

每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。

如果两个选择器同时作用到一个元素上，权重高者生效。

权重等级

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

行内样式

指的是html文档中定义的style，行内样式包含在你的html中 对你的元素产生直接作用，比如:

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

ID选择器

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

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

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

元素和伪元素

元素跟伪元素选择器,::after ::before ::first-letter ::first-line ::selecton

怎么确定权重

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

body #content .data img:hover

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

权重计算测试

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

权重的基本规则

相同的权重,以后面出现的选择器为最后规则：

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

#content h1 {
  padding: 5px;
}

#content h1 {
  padding: 10px;
}

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

不同的权重，权重值高则生效

选择器可能会包含一个或者多个与权重相关的计算点，若经过计算得到的权重值越大，则认为这个选择器的权重高。

CSS权重规则

包含更高权重选择器的一条规则拥有更高的权重。

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

a#a-02 { background-image : url(n.gif); }

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

因此A规则比B规则的权重要高。

带有上下文关系的选择器比单纯的元素选择器权重要高。

这条规则同样也适用于含有多个元素的选择器。

与元素”接近”的规则生效

比如css中我们定义了以下的规则:

#content h1 {
    padding: 5px;
}

在html 中也定义了规则：

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

Html中定义的规则因为跟元素挨得比较近，所以生效。

最后定义的这条规则会覆盖上面与之冲突的规则

比如下面的例子：

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

段落会呈现绿色的文字。当然也会出现黄色的背景，因为第一条规则只是被覆盖了color属性。

无论多少个元素组成的选择器，都没有一个class选择器权重高

比如说.introduction高于html body div h2 p。

通配符选择器也有权重，权重被认为是 0，0，0，0

比如 *， body * 被继承的css属性也带有权重，权重是0，0，0，0。

权重实战

  1. 利用LVHA原理来给链接应用样式：如果你想展现不同状态的链接样式，一定要记住link-visited-hover-active的顺序，或者简写为LVHA。

  2. 永远都不要使用!important：“如果你遇到了权重问题，第一个解决方法肯定是去掉!important，!important会覆盖所有的样式规则，但!important根本没有结构与上下文可言，所以很少用到。

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

  4. 减少选择器的个数：在css规则中尽可能的使用较少的选择器。

样式

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

p { padding: 10px; }

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

p.section { padding: 10px; }

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

CSS: #section { padding: 10px; }

(X)HTML: <p id="section">Text</>

4、上下文选择器可以定义一个带有层级关系顺序的规则

p span { font-style: italic; }

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

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

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

匹配所有带有title属性的元素

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

a:visited { text-decoration: underline; }

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

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