CSS 特异度、继承、求值过程简介

一、选择器特异度（Speeificity）

举个栗子：

1. #nav .list li a:link

2. .hd ul .links a

解释：

         因为，

                在 1 中，id 选择器有 1个（#nav），类与伪类共有 2个（.list 与 :link）,元素与伪元素共有 2个（li 与 a）。所以在 1 中的特异度为 122。

                在 2 中，id 选择器有 0个，类与伪类共有 2个（.hd 与 .links）,元素与伪元素共有 2个（ul 与 a）。所以在 2 中的特异度为 22。

         因为，在 1 中的特异度为 122 大于 在 2 中的特异度为 22 。

         所以，在 2 中的选择器的优先级更高。

 

小贴士：我们可以用这一特性进行属性覆盖从而实现代码的重复使用。

举个栗子：

<button class="btn">普通按钮 </button>
<button class="btn primary">主要按钮 </button>

<style>
.btn {
  display: inline-block; 
  padding: .36em .8em; 
  margin-right: .5em; 
  line-height: 1.5;
  text-align: center; 
  cursor: pointer; 
  border-radius: .3em; 
  border: none; 
  background: #e6e6e6; 
  color: #333;
}

.btn .primary { 
  color: #fff;
  background: #218de6;
}

</style>

效果图：

 二、继承

    ① 某些属性会⾃动继承其⽗元素的计算值，除⾮显式指定⼀个值。

    ② 一般文字、字体相关属性都可以继承，盒模型宽度、高度、边距等都不可以继承。

  1. 显式继承

      如果一个属性不可继承，我们可以使用 inherit 这个关键字让它能从父级继承。

举个栗子：

// box-sizing 这个属性是不可以继承的。这样设置之后，这个属性就要从父级开始读取。
* {
  box-sizing: inherit;
}

// 如果元素不单独设置 box-sizing 这个属性，那么所有元素都继承 html 的 box-sizing 属性。
html {
  box-sizing: border-box;
}

2. 初始值

      在 CSS 中，每一个属性都有一个初始值。例如：

// background-color 的初始值为 transparent
background-color: transparent;

// margin-left 的初始值为 0
margin-left: 0;

      我们也可以使用 initial 这个关键字显式重置为初始值。

background-color: initial;

      此时的 background-color 为 transparent;

三、CSS 求值过程