CSS知识点梳理(3)

选择器的特异性（Specificity）

当一个元素有两个或多个相互冲突的属性声明时，具有最高特异性的属性声明将胜出。
选择器的特异性值可以表示为四个部分0,0,0,0，实际如何确定 如下

• 每一个内联声明， 1,0,0,0
• 每一个 ID 选择器，加0,1,0,0
• 每一个类选择器、属性选择器、伪类选择器，加0,0,1,0
• 每一个元素选择器、伪元素选择器，加0,0,0,1
• 组合符和通配选择器不影响特异性值

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, */
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 */

一旦选择器的特异性被确定，特异性值将付给它所有的相关声明。

h1, h2.section {color: silver; background: black;}

h1 {color:silver;}    /* 0,0,0,1 */
h2 {background:black;} /* 0,0,0,1 */

h1.section {color:silver;}  /* 0,0,1,1 */
h2.section {background: black;} /*0,0,1,1*/

!important声明比所有的特异性值都高

继承（Inheritance）

当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值.

• 许多属性不具继承性；例如：border,盒模型属性包括margin,padding, background, border。

• 继承属性的值完全没有特异性。

  * {color: gray;}
  h1#page-title {color: black;}
  
  <h1 id="page-title"> Meerkat <em>Central</em> </h1>

  由于通配选择器适用于所有元素，并且具有特异性0,0,0,0,因此颜色声明的灰色胜过了继承的黑色值。后者根本没有特异性。

  通配选择器具有短路继承的效果

层叠/级联（Cascade）

层叠样式表(Cascading Style Sheets)：CSS 基于一种使样式层叠在一起的方法，它是通过将继承和特异性与一些规则相结合而实现的。

• 层叠规则

  1. 查找包含与给定元素匹配的选择器的所有规则
  2. 按显示权重对声明排序，!import比其它无!important规则权重高。
  3. 按来源对声明排序，三个基本来源：作者、读者、用户代理。通常情况下，作者的样式胜过读者，当读者!important样式比其它都强，包括作者的!important样式。 （以下权重由大至小）
     1. 读者 important 声明
     2. 作者 important 声明
     3. 作者 正常 声明
     4. 读者 正常 声明
     5. 用户代理（浏览器） 默认 声明
  4. 按特异性值排序
  5. 按声明的顺序排序
     • @import引入的外部样式，排在文档内部样式的前面.可视为在@import的地方，把外部样式表粘贴于此。

       @import url(basic.css);
       h1 {color: blue;}

     • a链接样式的顺序 link-visited-focus-hover-active.为什么？
       一个链可能同时处于多个状态，即同时匹配多个伪类。:link和visited是常态效果，:hover和:active是瞬时效果
       • 未点击链接前，匹配:link伪类，鼠标悬停/点击时，链接同时匹配:link和:hover/:active。在同时匹配多个伪类时，后出现的伪类样式会覆盖前面的，所有:link必须写在:hover、:active之前，才能展示链接悬浮、激活样式。
       • :hover和:active顺序？假若:hover放在:active后面，当点击链接的一瞬间，实际长匹配了:active同时也匹配了:hover伪类，:hover在后面就覆盖了:active样式，所有就无法展示:active样式了。故:active在:hover之后。
       • :link和:visited两个伪类之间顺序无所谓，因为它们不能同时匹配。