CSS权重及优先级

css样式优先级

！important>行间样式>id选择器>class选择器 属性选择器>标签选择器>通配符

css样式的权重值

上一部分是css优先级的比较，我们再来看看各种样式具体的权重值，这有利于我们计算复杂选择器的权重值。

！important                                  infinity  定量正无穷
行间样式（style）                                 1000
id选择器                                          100
class选择器|属性选择器|伪类选择器（eg ::before）     10
标签选择器|伪元素（eg :hover）                       1
通配符选择器                                        0

• ！important权重值是正无穷，在数学意义上的正无穷+1和正无穷无法比较，在计算机中表示的数字是有穷的。

优先级的基本规则

1.不同权重，权重值高则生效；

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

3.就近原则：如果在CSS中定义的样式A,在html也定义了B,则应用B；

4.body div nav ul li div p a h1 span em{color:green;}
.ton{color:red;}

按照权重计算，样式一11，样式二为10，但若对同一元素，同时使用如上样式，文字颜色为红色。由此可见，权重的比较并不是简单的十进制比较；

5.：not否定伪类在优先级计算中不参加计算，但是，计算选择器数量时会把：not 当做普通选择器进行计数.；

6.

body h1 {
  color: green;
}
html h1 {
  color: red;
}

h1的文本颜色为红色。