CSS样式表中的优先权

为什么80%的码农都做不了架构师？>>>

1、特殊性

首先来看一下这个例子将会发生的情形:

1 .grape { color:Blue; }              
2 H1 { color: Red; }                 
3 <h1 class="grape">Meerkat <em>Central</em></h1>

H1和.grape都匹配上面的H1元素，那么到底应该使用哪一个呢？实践证明.grape是正确答案，把句子显示为蓝色。根据规范，一般的 HTML元素选择符(H1,P 等)具有特殊性1，类选择符具有特殊性10，ID选择符具有特殊性100，值越大权重就越大，就优先选用。

1 H1 { color: Red; }                  /* 特殊性 = 1 */                  
2 P EM { color: Blue; }               /* 特殊性 = 2  */             
3 .grape { color: Fuchsia; }            /* 特殊性 = 1 0 */             
4 P.bright { color: Yellow; }            /* 特殊性 = 11 */             
5 P.bright EM.dark{ color: Gray; }       /* 特殊性 = 12 */             
6 #ID01 { color: Red; }                /* 特殊性 = 100 */

 

转载于:https://my.oschina.net/weisenz/blog/200639

标签：优先权,grape,特殊性,color,H1,Red,选择符,样式表,CSS
来源： https://blog.csdn.net/weixin_34163741/article/details/93712338