伪类选择器有以下6种：
动态伪类：
锚点伪类用户行为伪类目标伪类
UI元素状态伪类
否定伪类选择器
语言伪类选择器
CSS3结构伪类
这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来
锚点伪类 link visited hover active（一定要按照这个顺序写）
用户行为伪类 hover active focus
用于命名锚记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ height: 600px; font-size: 100px; text-align: center; line-height: 600px; } /* 目标添加效果 */ div:target{ background: yellowgreen; color: yellow; } </style> </head> <body> <p> <a href="#box1">1</a> <a href="#box2">2</a> <a href="#box3">3</a> <a href="#box4">4</a> <a href="#box5">5</a> </p> <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> <div id="box4">4</div> <div id="box5">5</div> </body> </html>概念：
我们把“:enabled”，“:disable”，“:checked”，“:seclect"伪类称为UI元素状态伪类
兼容性：
IE9+，FireFox、Chrome、Safari、Opera
概念：
:not(Element/selector) 选中除了括号里的其它元素
兼容性：
IE9+，FireFox，Chrome，Safari，Opera
举个例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>not</title> <style type="text/css"> * { margin: 0; padding: 0; border: none; } a { text-decoration: none; color: #333; font-size: 14px; display: block; float: left; width: 100px; height: 30px; } nav { width: 800px; margin: 0 auto; } nav > a:not(:last-of-type) { /*除了最后一个a没有被选中，nav下的所有a都被选中*/ border-right: 1px solid red; } </style> </head> <body> <nav> <a href="#">first</a> <a href="#">second</a> <a href="#">third</a> <a href="#">fourth</a> <a href="#">fifth</a> <!-- 最后一个没有右边框效果 --> </nav> </body> </html>用来匹配使用指定语言的元素
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Document</title> <style> p:lang(zh-cn){ background-color: red; } </style> </head> <body> <p lang="en"><q>Quote in English</q></p> <p lang="zh-cn"><q>中文的引号</q></p> </body> </html>CSS3的:nth选择器
我们把CSS3的:nth选择器也称为CSS3结构类
选择方法： :first-child，:last-child，:nth-child()，:nth-last-chld，nth-of-type()，:nth-last-of-type()，:first-of-type()，:last-of-type，:only-child，:only-of-type，:empty
概念：
选择第一个元素
兼容性：
IE8+，FireFox、Chrome、Safari、Opera
概念：
选择最后一个元素
兼容性：
IE8+，FireFox、Chrome、Safari、Opera
概念：
选择确切的位置上的元素，nth-child(1)等于first-child
兼容性：
IE9+，FireFox4+，Chrome，Safari，Opera
nth-child(n)选取每一行
n:所有的行
2n:每2行选择一行
3n:每3行选择一行
n+2:除第1行外所有的行
2n+4:从第4行开始隔1行选择1行
:nth-last-child(n) 从后向前选择,n为参数
n:所有行
2:倒数第2行
-n+3:最后3行
:only-child只有一个元素时使用
概念：
匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数
兼容性：
IE9+，FireFox4+，Chrome，Safari，Opera
概念：
:nth-of-type(N)选择匹配属于父元素的特定类型的第N个子元素的每个元素
兼容性：
IE9+，FireFox4+，Chrome，Safari，Opera
概念：
匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数
兼容性：
IE9+，FireFox4+，Chrome，Safari，Opera
概念：
:first-of-type选择器匹配属于其父元素的特定的首个子元素的每个元素
兼容性：
IE9+，FireFox4+，Chrome，Safari，Opera
概念：
:last-of-type选择器匹配属于其父元素的特定的首个子元素的每个元素
兼容性：
IE9+，FireFox4+，Chrome，Safari，Opera
概念：
:only-child选择器匹配属于其父元素的唯一子元素的每个元素
兼容性：
IE9+，FireFox，Chrome，Safari，Opera
概念：
:only-of-type选择器匹配属于其父元素的特定类型的唯一子元素的每个元素
兼容性：
IE9+，FireFox4+，Chrome，Safari，Opera
概念：
:empty选择器匹配没有子元素（包括文本节点）的每个元素
兼容性：
IE9+，FireFox，Chrome，Safari，Opera
CSS伪元素用于向某些选择器设置特殊效果
语法格式：
元素::伪元素 (Element::pseudo-element)
兼容性：
IE9+，FireFox，Chrome，Safari，Opera
概念：
根据“first-line”伪元素中的样式对Element元素的第一行文本进行格式化
说明：
“first-line”伪元素只能用于块级元素
概念：
用于向文本的首字母设置特殊样式
说明：
“first-letter”伪元素只能用于块级元素
概念：
在元素的内容前面插入新的内容
说明：
常用“content”配合使用
概念：
在元素的内容后面插入新内容
说明：
常用“content”配合使用，多用于清除浮动
概念：
用于设置在浏览器选中文本后的背景色和前景色
兼容性说明：
::selection在IE家族中，只有IE9+版本支持，在Firefox中需要加上其前缀“-moz”
css伪类：状态伪类基于元素当前状态进行选择的。结构伪类利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素。
css伪元素：对元素中的特定内容进行操作，而不是描述状态。
css3为了区分两者伪类使用单冒号，伪元素使用双冒号，但因为兼容问题现在大部分还是用单冒号。
