css 选择符与 权重值计算

css初学 2017-02-27 18:26

css 权重值计算 的计算

在css中 根据不同的css选择符 dom元素会呈现不同的样式

但是如果不同的选择符 操作同一个dom元素 呈现的样式又会呈现那个选择符的。 哪个优先级更高呢。

介绍：

根据不同的选择符 权重值不同

1 标签选择符 权重值为1

2 类选择符 权重值为10

3 id选择符 权重值为100

ps：

出现继承的元素 权重值非常低 有一些文献认为权重值为0.1

子选择符 (div >p) 包含选择符(div p) 权重值为前后选择符相加 如：（div >p）权重为div 10 p 10 权重为20

出现重要表示符 !important 则权重值为最高

如权重值相同 则后面得选择符 优先级高 如 (div>p) 和 ( div p ) 权重值相同 都为20 则后面的优先级别高

用法：

首先介绍继承元素的用法 有的样式可以被子元素继承 有的则不可以 如(border)

p标签继承了div的color样式

2 标记权重值计算

标记权重大于继承

3 出现包含选择符

包含选择符按照前后选择符计算权重

4 类选择符

类选择符

5 id选择符

id选择符 权重值为100

6 important表示符

important表示符

7 如果权重一样 则后面的样式优先级别更高

同权重值

注意：

上述都是值在引用关系一致的情况下， 存在引入关系时

引入关系的优先级为 内联式 (在标签上的样式) >嵌入式（html内部style标签）>外部式(link href="xx.css")

内联式 > 嵌入式 > 外部式