CSS 特殊性、继承与层叠

一、特殊性规则

选择器的特殊性由选择器本身的组件确定；特殊性由四个部分组成，其初始值为0，0，0，0。

1. 对于选择器中的每一个id，记0，1，0，0；

2. 对于选择器中的每一个类、伪类、属性，记0，0，1，0；

3. 对于选择器中的每一个元素、伪元素，记0，0，0，1；

4. 结合符与通配符对于选择器的特殊性没有任何贡献。

注意：

1. 0，0，1，0的特殊性比0，0，0，13的特殊性更高。

2. 通配符 * 的特殊性为0，0，0，0，它是有特殊性的；结合符（比如h1+p中的“+”）根本没有特殊性；继承而来的样式也没有特殊性。

请看如下代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             * {
 8                 color:red;
 9             }
10 
11             body {
12                 color:cyan;
13             }
14         </style>
15     </head>
16     <body>
17         <p>What kind of color this para will be?</p>
18     </body>
19 </html>

View Code

页面显示如下：

此例中，<p>元素从<body>元素中继承了cyan颜色，然而继承来的规则根本没有特殊性，其优先级低于 * 的0特殊性，所以<p>元素采用了 * 的规则，颜色为red。

关于通配符 * ：由于 * 适用于所有元素，而且有0特殊性，往往会在不经意间造成继承无法实现的情况，应该尽量避免使用 * 选择器。

3. 指定id属性的属性选择器与id选择器有本质区别，比如：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             div[id="test"] p {
 8                 color:red;
 9             }
10             
11             #test p {
12                 color:cyan;
13             }
14         </style>
15     </head>
16     <body>
17         <div id="test">
18             <p>What kind of color this para will be?</p>
19         </div>
20     </body>
21 </html>

View Code

页面效果：

此例中，div[id="test"] p 的特殊性为0，0，1，2；而 #test p 的特殊性为0，1，0，1；#test p 这个选择器胜出，所以字体颜色为cyan。

4. 行内样式的特殊性最高，为1，0，0，0。

5. 标记为!important的声明被称为重要声明，它没有特殊性，不过要与非重要声明分开考虑。

具体而言：非重要声明分为一组，它们之间的冲突使用特殊性解决；重要声明分为一组，它们之间的冲突内部解决；重要声明总是比非重要声明优先。

二、继承

1. 继承没有任何特殊性，记住这一点往往能明白很多问题。

请看如下代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             p {
 8                 color:red;
 9             }
10         </style>
11     </head>
12     <body>
13         <p>What kind of color this <a href="#">link</a> will be?</p>
14     </body>
15 </html>

View Code

页面效果：

为什么设置了<p>元素的颜色为红色，<a>元素的颜色却是蓝色？

这并不是因为<a>元素不继承父元素的颜色（原谅我之前就是这么认为的），而是因为<a>元素继承了<p>元素的颜色，但是这个继承来的样式根本没有特殊性，然而浏览器默认样式中对<a>元素设置了样式，很明显浏览器默认样式的特殊性更高，于是<a>元素就按照浏览器默认样式显示。

2. CSS中有一个关键字是所有属性共有的，inherit，它使一个属性的值与其父元素相同。

在大多数情况下，不必指定继承，因为大多数属性会自动继承；不过，自动继承的属性没有特殊性，很容易被其它样式覆盖；当需要显式地指定一个元素的样式与其父元素一致时，使用inherit会更方便。

三、层叠

层叠规则：

1. 按权重排序；读者重要声明>作者重要声明>作者一般声明>读者一般声明>用户代理声明。

2. 权重相同的情况下，按照特殊性排序，特殊性越高的胜出。

3. 特殊性相同的情况下，按照样式表中的顺序排序，后出现的胜出。

btw，正是因为这个规则，才会使用LoVe-HA的顺序声明链接样式（LoVe-HA 依次为 :link; :visited; :hover; :active）。

关于外部样式<内部样式<行内样式的说明：

这种说法来源于上述第3条规则。一般而言，在html的<head>元素下，我们习惯将外部样式表的<link>标签放在内部样式<style>之前，这就导致了内部样式的顺序在外部样式的顺序之后，所以内部样式优先级高；但是如果将<style>标签与<link>标签调换位置，比如这样：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             p {
 8                 color:red;
 9             }
10         </style>
11         <link rel="stylesheet" type="text/css" href="1.css">
12     </head>
13     <body>
14         <p>What kind of color this para will be?</p>
15     </body>
16 </html>