1. CSS伪类
- CSS伪类分为两类：状态性和结构性；
（1）状态性伪类根据当前元素状态进行选择。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。
| 状态性伪类 | 作用 |
|---|---|
| :link | 应用于未被访问过的链接； |
| :hover | 应用于鼠标悬停到的元素； |
| :active | 应用于被激活的元素； |
| :visited | 应用于被访问过的链接，与:link互斥。 |
| :focus | 应用于拥有键盘输入焦点的元素。 |
（2）结构性伪类是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素。
我在知道这类选择器之前，写导航的最后一个元素的特殊样式时，都要定义一个last类名来定义样式，而应用这类伪类选择器简化了文档结构并且灵活性更好。
| 结构性伪类 | 作用 |
|---|---|
| :first-child | 选择某个元素的第一个子元素； |
| :last-child | 选择某个元素的最后一个子元素； |
| :nth-child() | 选择某个元素的一个或多个特定的子元素； |
| :nth-last-child() | 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算； |
| :nth-of-type() | 选择指定的元素； |
| :nth-last-of-type() | 选择指定的元素， |
| :first-of-type | 选择一个上级元素下的第一个同类子元素； |
| :last-of-type | 选择一个上级元素的最后一个同类子元素； |
| :only-child | 选择一个是它的父元素的唯一一个子元素的元素； |
| :only-of-type | 选择一个是它的上级元素的唯一一个相同类型的子元素的元素； |
| :empty | 选择里面没有任何内容的元素。 |
2. CSS伪元素
伪元素是对元素中的特定内容进行操作，而不是描述状态。它控制的内容和元素是相同的，但它本身并不存在于文档结构中！常见的伪元素选择器包括：
| 常见伪元素 | 作用 |
|---|---|
| :first-letter | 选择元素文本的第一个字或字母。 |
| :first-line | 选择元素文本的第一行。 |
| :before | 在元素内容的最前面添加新内容。 |
| :after | 在元素内容的最后面添加新内容。 |
- 在CSS3中，大多数浏览器兼容用::(双冒号)表示伪元素，在CSS2中已经有的伪元素，用单冒号或者双冒号都可以。但是，要是需要兼容IE，则最好都用单冒号。
3. CSS伪元素:before/:after + CSS计数器的应用
（1）计数器介绍
counter-reset:[ <identifier> <integer>? ]+ | none | inherit
默认值为none。
第一个参数用来定义计数器的名称，但不可以是CSS关键字例如none；
第二个参数用来定义计数器开始计数的起始值，默认为0（则计数从1开始）。
该属性的主要功能是标识计数器作用域，而且此值必须作用于选择器上，并且不可缺少。counter-increment:[ <identifier> <integer>? ]+ | none | inherit
默认值为none。
第一个参数表示要调用的计数器的名称，就是在counter-reset里定义的那些；
第二个参数指定计数起始值。其值允许是0或者负整数值，如果未指定任何值，则该值为1（前提是counter-reset未显式设置计数的起始值）。其值递增是按倍数值递增，如果设置了值为2,后面元素递增值为4、6、8，依此类推。为负值时表示递减。counter()
用来调用定义的计数器，接受两个参数，中间用 , 分隔。
第一个参数就是之前定义的计数器名。
第二个参数用来定义计数的样式，同列表的list-style。（包括：disc，circle，square，decimal，decimal-leading-zero，lower-roman，upper-roman，lower-greek， lower-latin，upper-latin，armenian，georgian， lower-alpha， upper-alpha，none， inherit）
（2）计数器在:before/:after中的使用
:before/:after中有一个特殊的属性：content。除了chrome浏览器所有元素都支持content属性外，其他浏览器都只有:before/:after伪类中有这个属性。
content属性用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。
实现计数器：
效果图：
效果图
代码：
<!DOCTYPE html>
<html>
<head>
<title>CSS 伪类计数器</title>
<meta charset="utf-8">
<style type="text/css">
.container{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
background-color: #CCC;
padding: 100px 0;
}
.chooses{
display: inline-block;
position: relative;
counter-reset: choosenNum;
}
span{
color: red;
font-weight: 600;
}
.chooses input:checked{
counter-increment: choosenNum;
}
.choose span:before{
content: counter(choosenNum);
}
.class{
counter-reset: part;
}
.class h1{
counter-reset: subpart;
counter-increment: part;
}
.class h2{
counter-increment: subpart;
}
.class h1:before{
content: "章节" counter(part)" ";
}
.class h2:before{
content: counter(part) "." counter(subpart) "节 ";
}
</style>
</head>
<body>
<div class="container">
<div class="chooses">
<input type="checkbox">a
<input type="checkbox">b
<input type="checkbox">c
<input type="checkbox">d
<input type="checkbox">e
<input type="checkbox">f
<input type="checkbox">g
<input type="checkbox">h
<input type="checkbox">i
<input type="checkbox">j
</div>
<p class="choose">我选择了<span></span>个字母</p>
<div class="class">
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>
</div>
</div>
</body>
</html>
据自己在写代码的过程中得到的一些体验来讲，在要设置counter-increment属性的选择器里一定要包含设置了counter-reset属性的元素作为选择器的一部分。
