CSS3中选择器的权重问题

首先，先看一张图。图上只有一个div盒子元素。在style样式中给该盒子添加了四种背景颜色的样式。按照之前所学的知识应该是最下面的样式会对之前的其覆盖作用，但事实上并没有。其次应该是id选择器的样式起效果，但同样的没有作用。值得注意的是，第二个盒子的样式中有一个！important的写法。在这里该写法的优先级大于任何一种选择器。

首选选择器的类型包括：（优先级递增）

1.类型选择器：包括div、h1等等元素，还有::before等伪元素选择器

2.类选择器：包括.root等自起名的类名，以及属性选择器如：[type="radio"]，还有伪元素选择器如：p:hover。

3.id选择器：包括#root等自起名的id名。

通配符选择器（*）关系选择符（>,+,~,||）否定伪类（:not()）对优先级没有影响。（但是在:not()内部声明的选择器受到影响）

！important 例外规则。此写法会覆盖对应元素对应属性的任何其他声明。建议一般不要使用该属性，你可以理解为该属性无优先级无关，它只与显示结果有关。

优先级的高低本质上取决于该选择器的权重。一个元素的行内样式权重为1000，id选择器写的样式权重为100，类选择器和伪类选择器的权重为10，标签选择器的权重为1，通配符选择器的权重为0。

 结合上面两图可以看出，在有 !important 的参与下。不管你其他相同属性的选择器权重有多大，都不可以显示出效果，这就可以印证上面说的那点，你可以理解这个不参与权重，他直接影响你的显示效果。其次在没有 !important 的参与的情况下，就背景颜色写了四种情况，id选择器，类选择器，标签选择器，还有行内样式。权重相比较之下为100:10:1:1000，所以就行内样式起到效果。