1.结构性伪类选择器---：root：从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。
2.“:root”选择器等同于<html>元素，简单点说：:root{background:orange}与 html {background:orange;} 得到的效果等同。 建议使用:root方法。
另外在IE９以下还可以借助“:root”实现hack功能
特别注意细节问题：当body{background：；}使用背景颜色，：root{}也使用背景颜色时，body里改变的只能是body里面内容颜色，剩下的都是root里定义的颜色。如果：root里没有指定背景颜色，则整体背景颜色为body定义的颜色。
3.:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。p:empty {display: none;}
4.:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。
5.:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。
1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称。
2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）。
3、多个url（多个target）处理：就像上面的例子，#brand与后面的id="brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。
4、
#brand:target { background: orange; color: #fff; }
#jake:target { background: blue; color: #fff; }
#aron:target { background: red; color: #fff; }
上面的代码可以对不同的target对象分别设置不的样式。
6.“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
7.“:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器，
8.“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。
9.“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。
10.“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
11.“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。
12.“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。
13.“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。
14.“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
15.::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用场景最多的就是清除浮动。不过这个属性对于img和input元素不起作用。
content配合CSS的伪类或者伪元素，一般可以做以下四件事情：
|
功能 |
功能说明 |
|
none |
不生成任何内容 |
|
attr |
插入标签属性值 |
|
url |
使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源） |
|
string |
插入字符串 |
在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”，只不过只是在这里插入了一个空格。如下所示：
.clearfix:before,
.clearfix:after {
content:””;
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}
插入元素属性值的方法：
假设我们有一个元素：
<a href="##" title="我是一个title属性值，我插在你的后面">我是元素</a>
可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后：
a:after {
content:attr(title);
color:#f00;
}
“：first-line” 选择器匹配文本块的首行。
“：first-letter” 选择器选择文本块的首字母
在CSS3中除了结构性伪类选择器外，还有一种UI元素状态伪类选择器，这些选择器在共同特点是：指定的样式只有当前元素处于某种状态下时才起作用，在默认状态下不起作用。
在CSS3中，共有17种UI元素状态伪类选择器，分别是：E:hover E:active E:focus E:enabled E:disabled E:read-write E:read-only E:checked E:default
E:indeterminate E:selection E:invalid E：valid E:required E:optional E:in-range
16.在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。
17.在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。
18.“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体， 有的设计要求不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。
19.“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”
20.“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <link href="index08.css" rel="stylesheet" type="text/css"> </head> <body> <p>这是第一行内容<br/>这是第二行内容，哈哈哈哈哈哈</p> <hr/> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> </ul> <hr/> <h2> hello world!你好中国！ </h2> <hr/> <table border="1px"> <tr> <th>表格1</th> <th>表格2</th> <th>表格3</th> </tr> <tr> <td>内容1</td> <td>内容2</td> <td></td> </tr> <tr> <td></td> <td>内容2</td> <td>内容3</td> </tr> <tr> <td>内容1</td> <td></td> <td></td> </tr> </table> <hr/> <a href="#a1">菜单1</a> <a href="#a2">菜单2</a> <a href="#a3">菜单3</a> <a href="#a4">菜单4</a> <div id="a1"> <h3>菜单内容1</h3> </div> <div id="a2"> <h3>菜单内容2</h3> </div> <div id="a3"> <h3>菜单内容3</h3> </div> <div id="a4"> <h3>菜单内容4</h3> </div> <hr/> <div class="type1"> <h3>标题1</h3> <a>链接1</a><br/> <a>链接2</a> <h3>标题2</h3> <h3>标题3</h3> <a>链接3</a> <h3>标题4</h3> <a>链接4</a> <h3>标题5</h3> <a>链接5</a> <h3>标题6</h3> <a>链接6</a> </div> <hr/> <input class="Text" type="text"name="name"> <input class="Text" type="text"name="age"> <input type="checkbox">金毛 <input type="checkbox">萨摩耶 <input type="checkbox">大狗狗 <hr/> <script> function radio_change() { var radio1=document.getElementById("radio1"); var radio2=document.getElementById("radio2"); var text=document.getElementById("text1"); if(radio1.checked){ text.disabled=""; }else{ text.value=""; text.disabled="disabled" } } </script> <div class="div"> <input type="radio" id="radio1" name="radio" onchange="radio_change()">可用 <input type="radio" id="radio2" name="radio" onchange="radio_change()">不可用 <input type="text" id="text1" disabled> </div> </body> </html>
:root{ background-color:lightpink; } body{ margin: 30px; counter-reset: paracount;/*默认初始值为1，也可指定其他值*/ background-color: darkseagreen; } p:first-line{ color: cornflowerblue; } p:first-letter{ font-size: 30px; color: #ff6471; } li:before{ counter-increment: paracount;/*默认增值为1，也可指定其他值*/ content:counter(paracount)"."; /*content: "-----";*/ } li:after{ content: "*******"; font-size: 10px; color: darkgray; } li:first-child{ width: 150px; background-color: red; } li:last-child{ width: 150px; background-color:darkviolet;/*紫色*/ } li:nth-child(3){ width: 150px; background-color:yellow; } li:nth-last-child(2){ width: 150px; background-color:lightblue; } /*li:nth-last-child(odd){!* 倒着数为奇数行改变颜色 odd为奇数 even为偶数 *!*/ /* 150px;*/ /*background-color:lightblue;*/ /*}*/ body *:not(h2){ font-style: italic; } :empty{/*内容为空白的时候运用这个样式 这里的例子是：表格内容为空的时候背景颜色变为黄色*/ background-color: red; } table{ border-collapse: collapse; } :target{ background-color: #37b9ff; width: 200px; } .type1 h3:nth-of-type(odd){ /*只计算同类标签*/ width: 200px; color: yellow; } .type1 a:nth-last-child(odd){/*计算是把h3和a标签一起进行计算的，也就是说所有子元素一起来计算 所以要想只计算同一类型的的样式需要使用 nth-of-type()*/ width: 150px; color:lightblue ; } /*注意顺序不能颠倒*/ .Text:hover{ background-color: cornflowerblue; } .Text:focus{ background-color: brown; } .Text:active{ background-color: yellow; } input[type="checkbox"]:checked{ outline:2px solid gold; background-color: blue; } .div input[type="text"]:enabled{ background-color: yellow; } .div input[type="text"]:disabled{ background-color: darkgray; }
