CSS又名层叠样式表，是由一个个样式规则组成，而每一个样式规则又可以分为两部分：选择符与声明(或叫样式)。
选择符就是CSS的选择器，用来对特定的元素进行样式设置。一个元素的子元素能继承该元素的样式，但如果子元素设置了样式，也能覆写继承下来的样式，就像板页岩这样累在一起。而如何让元素显示出想要的样式，我们就必须对权重这个概念有所了解。
权重你可以说是针对样式规则的，也可以说针对选择符。之所以这样说，因为有一个重要的标识符! important可以放到样式声明的最后，用来无视本文重点说的权重等级。我觉得最好还是不要用这东西，用多了会严重扰乱CSS的权重等级。
现有的规则一般是这么定的：
1、将一个样式的权重分为5级，初始值为（0，0，0，0，0）。
2、第一个值代表的是!important，如果这个样式上面有!important就算是1，不然是0。
3、第二个是代表的在html中直接作用在节点上的内联样式，如果这个样式是内联样式，就是1，不然是0。
4、第三个值是id选择器，如果这个样式是在id选择器中的就+1。前面选择器中有多少个id选择器，每个都+1。
5、第四个值是class选择器、属性选择器，该样式所在的选择器每有一个class选择器、属性选择器，都+1。
6、第五个值是标签选择器，该样式前面每有一个，都+1。
在都确认完之后，从第一个值开始对比，只要值比别的大，那么这个样式就是权重最重的。如果第一个值一样，则依次比较下一个值。
这基本就是我整理到的网上的几乎全部样式权重了，我看的还挺清楚，觉得自己都明白了。直到我突然碰到了这么一段代码。
<!DOCTYPE html>
<html>
<head>
<title>css权重</title>
</head>
<style type="text/css">
#a {
color: white;
}
.b {
color: red;
}
.b:hover {
color: blue;
}
.b:first-letter {
color: gray;
}
.b:first-line {
color: #eee;
}
div.b {
color: orange;
}
.b.c {
color: yellow;
}
</style>
<body>
<div class="b c d" id="a">来自马三立的相声，也是马三立最著名的段子之一。马三立是深受广大民众喜爱的著名表演艺术家、相声“泰斗”。祖籍甘肃省永昌，生于北京，回族。他12岁跟父亲马德禄学艺，后拜著名相声演员周德山(周蛤蟆)为师，演出的传统相声有200多个。</div>
</body>
</html>
我被这:hover，以及:first-line给直接难住了。对于这些伪类伪元素，我一向认为这些东西都是凌驾于整套css权重体系的。但是事实不是这样。
结果是，:hover的权重比不过#a，跟.b.c权重平级，比div.b权重要高。这么一看这个在我前面写的权重体系中跟class选择器、属性选择器平齐。我觉得伪类伪类，实际上就是一个class类，虽然在使用上有本质区别，但是在设计上可能就是同一类型，所以会直接跟class在同一层级中。
:first-line和:first-child均不受任何影响，即使在#a上加上!important，也是一样显示自己独立的样式。这两个伪元素，实际上像是在这个元素底下偷偷地声明了一个span元素，然后这个span元素继承了所有的父级元素属性，但是声明在自己元素上面的样式是会盖住继承下来的属性的。所以看起来他们的权重最高。
大家如果感兴趣的话建议还是跑一下代码，自己试验一下比较好。
网友评论