CSS样式选择器的权重之重塑三观

关于css权重,前端开发者大概能想到:!important优先级最高,内联样式次之,然后是css样式文件显示最后的样式选择器。

 周末看了《CSS权威指南》的第三章-结构和层叠,感触很深。整理了一下读书笔记,分享给大家!

 页面显示样式的优先级取决于其“特殊性”’,特殊性越高,就显示最高的,当特殊性相等时,显示后者。只要弄明白特殊性的高低,对于选择器的权重就能迎刃而解。

 三观重塑从特殊性的概念开始,非常重要!特殊性表述为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 */

hello world

这个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 的字体颜色是black,因为特殊性值最高。
    最前面0开头的特殊性,第一个位置是留给内联样式的,所以当出现如下的时候,内联样式的特殊性值高

    body#box{background:red;} /* specificity = 0,1,0,1 */
     /* specificity = 1,0,0,0 */
    背景色显示blue
    

    还有一个超凡脱俗的,换上神装的声明:!important 。它的优先级最高,直接鄙视前面讲的特殊性值!当出现 !important声明属性时,显示 !important声明的属性。
     关于通配符“*”的特殊性值:0,0,0,0 虽然对其他选择器没有影响,但是对继承属性还是有作用的,比如:

    hello world

    *{color:gray} p{color:red}

    因为color属性具有继承特性,p声明了颜色为red,em标签也继承了color:red;虽然通配符的特殊性值为0,但是有总比没有强(我对这种解释其实无语的,但是我也不知道怎么解释,只能搬书上的一句话了)。所以通配符“*”比继承特性的优先级高,如下图。
    继承和通配符优先级

    最后一个就是当特殊性相等的时候:

    h1{color:red;} /* specificity = 0,0,0,1 */
    h1{color:blue}/* specificity = 0,0,0,1 */
    

    显示后者,页面h1字体颜色显示blue。
    相信你对样式权重有了新的认知吧,哈哈,树立正确的三观的感觉真好!!!

    你可能感兴趣的:(CSS样式选择器的权重之重塑三观)