关于css权重，前端开发者大概能想到：!important优先级最高，内联样式次之，然后是css样式文件显示最后的样式选择器。</br>
周末看了《CSS权威指南》的第三章-结构和层叠，感触很深。整理了一下读书笔记，分享给大家！</br>
页面显示样式的优先级取决于其“特殊性”’，特殊性越高，就显示最高的，当特殊性相等时，显示后者。只要弄明白特殊性的高低，对于选择器的权重就能迎刃而解。</br>
三观重塑从特殊性的概念开始，非常重要！特殊性表述为4个部分：0,0,0,0。一个选择器的特殊性如下确定：
1.对于选择器是#id的属性值,特殊性值为：0,1,0,0
2.对于属性选择器、class或伪类，特殊性值为：0,0,1,0
** 3.对于标签选择器或伪元素，特殊性值为：0,0,0,1**
** 4.通配符‘*’对特殊性值为：0,0,0,0 所以通配符对与选择器来说不会影响其特殊性值，但对继承属性的时候会有影响，后面会讲解。**
例如：
h1{color:red;} /* specificity = 0,0,0,1 */
p em{color: purple;} /* specificity = 0,0,0,2 */
.grape{color:purple;} /* specificity = 0,0,1,0 */
*.bright{color:yellow;} /* specificity = 0,0,1,0 */
p.bright em.dark{color:maroon;} /* specificity = 0,0,2,2 */ **
#id216 {color:blue;} /* specificity = 0,1,0,0 */
div#sidebar *[href] {color:silver;} /* specificity = 0,1,1,1 */ ******
这里的4部分特殊性的值没有所谓的进位，从左往右比较，比如：0,1,0,0 比 0,0,6,7大，所以0,1,0,0的优先级更高。
通过上面的解释，应该能明白特殊性值的取值，下面通过几个有代表性的例子来重塑你的三观！
h1.title{color:blue} /* specificity = 0,0,1,1 */
.title{color:red;} /* specificity = 0,0,1,0 */
<h1 class="title">hello world</h1>
这个h1标题的字体颜色就是blue，因为它的特殊性值更高。（一些初学者以为当这种情况的时候显示后者，其实和选择器在css文件的位置无关！！！）
#side-content{color:black;} /* specificity = 0,1,0,0 */
html>body ul li[name="list"] {color:white;} /* specificity = 0,0,1,4 */
<li id="side-content">侧边栏列表</li>
这里 li 的字体颜色是black，因为特殊性值最高。
最前面0开头的特殊性，第一个位置是留给内联样式的，所以当出现如下的时候，内联样式的特殊性值高
body#box{background:red;} /* specificity = 0,1,0,1 */
<body style="background:blue"></body> /* specificity = 1,0,0,0 */
背景色显示blue
还有一个超凡脱俗的，换上神装的声明：!important 。它的优先级最高，直接鄙视前面讲的特殊性值！当出现 !important声明属性时，显示 !important声明的属性。
关于通配符“*”的特殊性值：0,0,0,0 虽然对其他选择器没有影响，但是对继承属性还是有作用的，比如：
<p>hello <em>world</em></p>
*{color:gray}
p{color:red}
因为color属性具有继承特性，p声明了颜色为red，em标签也继承了color：red；虽然通配符的特殊性值为0，但是有总比没有强(我对这种解释其实无语的，但是我也不知道怎么解释，只能搬书上的一句话了)。所以通配符“*”比继承特性的优先级高，如下图。
<img src="https://img.haomeiwen.com/i2711211/ab01ebb57f30e732.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width="200" height="200" alt="继承和通配符优先级" >
最后一个就是当特殊性相等的时候：
h1{color:red;} /* specificity = 0,0,0,1 */
h1{color:blue}/* specificity = 0,0,0,1 */
显示后者，页面h1字体颜色显示blue。
相信你对样式权重有了新的认知吧，哈哈，树立正确的三观的感觉真好！！！
网友评论