所以完整的层叠优先级是:
浏览器缺省 < 外部样式表(css文件) < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表(<style>标签内的样式) < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式(style=”)

共12个优先级

如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：一个元素同时应用多个class，后定义的优先(即近者优先)，加上!important者最优先! 注意，和在class中的书写顺序无关

2. 样式类别

共四中。

2.1. 浏览器缺省值

即写简单的html代码，在浏览器中展示出来的样式。它依赖于浏览器的实现。如下

<h1>123</h1>

2.2. 内联样式

即由style属性定义的样式。

<h1 style='border : 1px solid;'>123</h1>

2.3. 内部样式表

即由<style></style>标签定义的样式。

<style>
  h1{
    background:red;
  }
</style>

2.4. 外部样式表

单独的css文件，由标签使用href引入。

<link rel="stylesheet" href="/lib/share/css/share.min.css">

3. 选择器

在内部样式表和外部样式表中，还有不同的选择器。需要注意的是，这些选择器都不是独立的，你可以任意的选择起来组合，这正是css选择器的强大之处，也是弥补style属性的不足之处。

3.1. 基本选择器

这个基本选择器并不是CSS中定义的，而是相对于后代选择器，我自己分类的，它们都是单一的、不影响子节点的选择器。

3.1.1. 元素选择器

文档的元素就是最基本的选择器。下边的规则匹配所有的h1元素

h1{
    background:red;
  }

3.1.2. 属性选择器

3.1.2.1. 选择包含某种属性的元素。

/*选择所有带有title属性的元素*/
*[title] {
    color:red;
}
/*选择所有带有href的a标签*/
a[href]{
    color: #0e2231;
}

3.1.2.2. 根据具体属性值选择

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

3.1.2.3. 类和id属性

特殊的，如果要选择id为特定值或者class为特定值的元素，可以简写如下(注意元素和点或者#之间没有空格，如果有空格，就变成后代选择器了)：

/*选择class为test的div*/
div.test{
    color: #000;
}
/*选择id为test的div*/
div#test{
    color: #000;
}

3.1.3. 类选择器（.class）

以点开头，在html元素中使用class属性引入。这是css最常用的方式。因为一般来说id选择器为javascript服务的可能性更大且在上下文必须保持唯一，所以css尽量不使用id选择器，避免和javascript产生不必要的交叉冲突。

/*选择所有class属性中包含test的元素*/
.test{
    background:red;
  }

<div class="test">123</div>
<p class="test">123</div>

3.1.4. id选择器（#id）

以井号#开头，在html元素中使用id属性引入。因为id属性为javascript服务的可能性更大且在上下文必须保持唯一，所以css尽量不使用id选择器，避免和javascript产生不必要的交叉冲突。

/*选择所有class属性中包含test的元素*/
#test{
    background:red;
  }

<div id="test">123</div>
<p class="test">123</div>

3.2. 选择器分组

假如现在有一个需求，让所有的h元素背景为红色。那么实现方式如下：

/*第一种*/
h1{
    background:red;
}
h2{
    background:red;
}
h3{
    background:red;
}

/*第二种*/
h1,h2,h3{
background: red;
}

显然第二种写法更符合我们的习惯。这种在选择器之间用逗号隔开的写法就是选择器分组。

3.3. 后代选择器

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

3.3.1. 派生选择器

感觉派生选择器就是后代选择器。只是目前我还不知道类派生和id派生的优先级是否有差别。所以暂时先这样写。

3.3.1.1. 类派生选择器（.class h1）

以class选择器开始，后边跟上其它元素选择器、id选择器或者类选择器，中间用空格隔开。这样的写法就是类派生选择器

/*选择class属性为test元素下的h1元素。.test下的其它元素不受影响*/
.test h1{
    background:red;
  }

<div class="test">123<h1>456</h1></div>
<p class="test">123</div>

3.3.1.2. id派生选择器（#id h1）

类似于类选择器。以id选择器开始，后边跟上其它元素选择器、id选择器或者类选择器，中间用空格隔开。这样的写法就是id派生选择器

/*选择id属性为test元素下的h1元素。.id下的其它元素不受影响*/
#test h1{
    background:red;
  }

<div #="test">123<h1>456</h1></div>
<p class="test">123</div>

3.4. 子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。可以说子元素是一种特殊的后代选择器

子结合符两边可以有空白符，这是可选的。

如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

3.5. 相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。

注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符

如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

3.6. 伪类选择器

比如说a标签，它有很多种状态：未点击、已点击、鼠标移入、正在活动…，这就需要使用伪类选择器。

伪类选择器使用半角冒号作为结合符

3.6.1. 锚伪类

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

3.6.2. :first-child 伪类

使用 :first-child 伪类来选择元素的第一个子元素。它的使用一定是结合了父元素的，即父元素下的第一个子元素，如果没有指定父元素，则对于全部节点有效

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。

3.6.3. :lang伪类

:lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：


<html>
<head>

<style type="text/css">
q:lang(no)
   {
   quotes: "~" "~"
   }
</style>

</head>

<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>

3.7. 伪元素

伪元素也是比较重要的。随处可见:after和:before的使用

3.7.1. :before 伪元素

“:before” 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个

元素前面插入一幅图片：

h1:before
  {
  content:url(logo.gif);
  }

3.7.2. :after

“:after” 伪元素可以在元素的内容后面插入新内容。