一、伪元素和伪类的概念
-
伪类：首先是类的一种，类似
class，代表一些元素的状态，逻辑上存在，文档树中却无须标识的分类（典型的就是链接的各个状态） -
伪元素：首先是元素的一种，类似
p标签，代表了某个元素的子元素，这个子元素逻辑上存在，但却并不实际存在于文档树中 - 伪类
:first-child - 1、将第一个p设成红色
p:first-child {color: red}
<div>
<p>第一个段落</p> //我将变成红色
<p>第二个段落</p>
</div>
如果不用伪类，需要手动给DOM元素添加类来实现
.first-child {color: red}
<div>
<p class="first-child">第一个段落</p>
<p>第二个段落</p>
</div>
- 伪元素
::first-letter - 2、给第一个字设成红色
p::first-letter {color: red}
<div>
<p>第一个段落</p>
<p>第二个段落</p>
</div>
如果不用伪元素，需要添加一个元素（如span）来实现
.first-letter {color: red}
<div>
<p><span class="first-letter">第</span>一个段落</p>
<p>第二个段落</p>
</div>
二、伪类和伪元素的区别
- 伪类 模拟新 添加一个类 来实现某种效果
- 伪元素 模拟新 添加一个元素 来实现某种效果
- 伪类 作用于**标签（状态） **本身
- 伪元素 作用于内容本身
- 伪类 前面是一个冒号， 伪元素 前面是两个冒号（CSS3之前是一个冒号，CSS3后变成两个冒号，用于区分）
- 举例：
伪类：E:first-child
伪元素：E::first-line
- NOTE：
- 伪元素跟伪类都是选择器的补充
- 伪元素选择器选择出来的“部分” 不在dom里，也不能对其绑定事件，如果对伪元素前面的选择器定义的元素绑定了事件，伪元素同样会生效，永远记得伪元素生成的是“ 表现 ”。
三、伪类和伪元素种类
-
伪类种类
-
伪元素种类
伪元素：
::first-line，::first-letter，::before，::after，::selection::first-line，::first-letter分别是首行和首字母::before，::after相当于在元素内部插入两个额外的标签::selection用于匹配选中的文本（注意Firefox下是::-moz-selection）该伪元素只接受两个属性background、color伪类分类：动态，UI元素状态，目标，语言，结构，否定
两种常用伪类动态伪类选择器：
:link，:visited，:hover，:active，:focusUI元素状态伪类选择器：
:checked，:enabled，:disabled
基础知识学到这里就可以啦～
四、不常用伪类
其他伪类选择器：
-
目标伪类选择器：
:target(用来获取锚点#部分) - 页面实现跳转定位很多都是使用a标签的锚点来来定位。
- 其实原理是
a标签的href属性能改变浏览器的location.hash，让页面在有滚动条的前提下实现页面内跳转 -
:target作用就是获取跳转的目标元素 - 举例：如下可以获取到
id＝"logo"的div
<div id="logo"> …</div>
<a href="#logo">jump to logo</a>
-
语言伪类选择器：
:lang(根据lang属性匹配元素) - 举例：
<html lang="en"> //可在html标签上设，也可以<body lang="en">标签里设
:lang(en) { …… } //根据页面的不同的语言（如英语和法语）对不同DOM元素进行处理
:lang(fr) { …… }
```
+ **结构伪类选择器：**`:first-child，:last-child，:nth-child(n)，:nth-last-child(n)，:nth-of-type(n)，:nth-last-of-type(n)，:first-of-type，:last-of-type，:only-child，:only-of-type，:root，:empty`
+ **否定伪类选择器：**`:not`(如不`hover`时，可以设置为`li:not(:hover)`)
**详解结构伪类选择：**
+ **结构伪类选择器：**
+ **:first-child** 第一个孩子，等同于`:nth-child(1)`
+ **:last-child** 最后一个孩子，等同于`:nth-last-child(1)`
+ **:nth-child(n)** 父标签里第n个孩子，反之*`:nth-last-child(n)`*就是倒数第n个孩子
+ **:nth-of-type(n)** 父标签里第n个某类型的孩子，反之**`:nth-last-of-type(n)`**父标签里倒数第n个某类型的孩子
+ 比较`:nth-child(n)、:nth-of-type(n)`
这两个伪类的参数n从0开始
可以写任意的表达式，如n+4，-n+6，3n-2等（当结果值等于或小于0时直接被无视掉）
+ 例如：*div下有两个p，我们想将第二个p变成红色*
```
p:nth-child(2) { color: red; }
```
```
p:nth-of-type(2) { color: red; }
```
+ 这两种都可以实现，但意义却不同
前者表示：该标签是p且是父标签里第二个孩子
后者表示：父标签里第二个p
+ **:first-of-type** 父标签里第一个某类型的孩子，反之**`:last-of-type`**是最后一个某类型的孩子，等同于`:nth-of-type(1)，:nth-last-of-type(1)`
+ **:only-child** 父标签里仅有一个孩子
+ **:only-of-type**父标签里唯一一个该类型的孩子
+ **:root** 匹配根元素，HTML中根元素始终是`html`
+ **:empty** 表示当元素里面什么都没有的时候（包括空格、标签内换行）应用相关样式，常用于高亮提示用户搜索的结果为空
+ 例如：`.xx:empty { background-color: red; }`，
`div`里无内容：背景色成红色
`div`里有内容：无背景色
*但要注意伪元素不算内容*
+ 例如：`.xx::after { content: 'hello'; }`，
`div`里显示字但背景色仍旧是红色
+ 原因：
1、`::before，::after`是伪元素，不是真实元素，因此不会影响`:empty`判断
2、而且因为伪元素不在DOM树内，你无法取得`::before,::after`伪元素生成的`content`
>参考文章推荐：
[CSS伪类伪元素](http://www.jianshu.com/p/e8c075e39104)
[谈谈css的伪类和伪元素](http://www.haorooms.com/post/css_wl_wys)
[详解 CSS 属性 - 伪类和伪元素的区别](https://segmentfault.com/a/1190000000484493)
[CSS3的nth-child() 选择器，表格奇偶行变色](http://www.haorooms.com/post/css3_nth-child)
[CSS 选择器演示](http://www.haorooms.com/tools/css_selecter/)