【css】css特殊性-ag凯发k8国际

注：文章来源：《css权威指南》 第三章。 部分未予记录

css选择器可以用多种方式去选择元素，实际上一个元素可以由使用两个或者多个规则来匹配，每个规则都有各自的选择器。请看例子

css: h1 {color: red;}body h1 {color: green;}h2.grade {color: purple;}h2 {color: silver}然后是特别长的一个选择器html > body table tr[id="totals"] td ul > li {color: marron}li#answer {color: lightblue}各自的效果：

这是h2标签下的内容

li的content

这时候你可以根据样式定义去查看上面的效果 这时候，就引出一个话题，css特殊性(权重)，大白话就是根据某一种规则，谁的优先级高谁就能够决定选中元素的样式显示。
但是这并不是解决冲突的全部，实际上所有样式冲突的解决都有层叠来决定（后续）。

选择器的特殊性是由选择器本身的构成[css权威指南写作组件]来确定，特殊值由四个组成部分，如 0，0，0，0，一个选择器的具体特殊性或者权重的计算 如下：

• 对于选择器中给定的各个id属性值，加 0, 1, 0, 0 
  -----什么意思 就比如说上面的例子: li#answer 就符合规则， li[id="answer"] 不符合规则
• 对于选择其中给定的各个 类属性值，属性选择 或者 伪类, 加 0, 0, 1, 0
  -----还是拿上面的例子： tr[id="totals"] 符合了属性选择 这一项 ; 类属性值长这样 selector.classname ; 伪类自行脑补
• 对于选择器中给定的 各个元素 和 伪元素, 加 0，0，0，1 
  -----依旧使用上面的例子: html > body table tr[id="totals"] td ul > li {color: marron} 一共7个元素，并且没有伪元素，所以符合规则，加 0, 0, 0, 7
• 最后一点：结合符和通配选择器 对特殊性没有任何效果。 
  -----  > 以及* 对特殊性没有作用

这时候我们来计算上面的几个的选择器的权重值

h1 {color: red;} 0, 0, 0, 1body h1 {color: green;} 0, 0, 0, 2h2.grade {color: purple;} 0, 0, 1, 1 h2 {color: silver} 0, 0, 0, 1然后是特别长的一个选择器html > body table tr[id="totals"] td ul > li {color: marron} 0, 0, 1, 7li#answer {color: lightblue} 0, 1, 0, 1

你可能会奇怪，计算这个特殊性（权重）的时候为什么 第一个位置的值始终为0呢 ？ 一般情况下，第一个0是为内联样式声明保留的，它比所有其他声明的特殊性都高。但是请注意关键字!important，它的优先级甚至 高于 内联样式

但是如果特殊性相等的两个规则同时应用到一个元素会怎么样。那么后面的一个有更高的优先级。 
如果样式表中有导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表中的所有声明在后面。

转载于:https://www.cnblogs.com/dongguapifly/p/10627113.html

总结

以上是ag凯发k8国际为你收集整理的【css】css特殊性-优先级-权重的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。