一、CSS选择器
1.元素选择器
E{…} 其中E代表有效的HTML元素名。
2.属性选择器
E{…}:指定该CSS样式对所有E元素起作用。
E[attr]{…}:指定该CSS样式对具有attr属性的E元素起作用。
E[attr=value]{…}:指定该CSS样式对所有包含attr属性，且attr属性为value的E元素起作用。
E[attr ~=value]{…}:指定该CSS样式对所有包含attr属性，且attr属性的值为以空格隔开的系列值，其中某个值为value的E元素起作用。
不常用的就不列举了
3.ID选择器
ID选择器的语法：#idValue{…}
/*对id为xx的元素起作用的CSS样式*/
#xx{
border:2px dotted black;
background-color:#888;
}
<div id="xx">id属性为xx的div元素</div>
4.class选择器
class选择器的语法：.classValue{…}
/*对所有class为myclass的元素起作用的CSS样式*/
.myclass{
width:240px;
height:50px;
background-color:#ddd;
}
<div class="myclass">class属性为myclass的div属性</div>
<p class="myclass">class属性为myclass的p元素</p>
5.包含选择器
包含选择器用于指定目标选择器必须处于某个选择器对应的元素内部。其语法格式如下：
Selector1 Selector2 {…} /其中Selector1、Selector2都是有效的选择器/
6.子选择器
子选择器用于指定目标选择器必须是某个选择器对应的元素的子元素。
子选择器的语法格式如下：Selector1>Selector2 {…}
div>.a{
width:200px;
height:35px;
border:2px dotted black;
background-color:#666;
}
div><p class="a">属性为a且是div的子节点的元素</p></div>
7.CSS3新增的兄弟选择器
兄弟选择器语法如下：Selector1 ~ Selector2 {…}
兄弟选择器匹配与Selector1对应的元素后面、能匹配Selector2的兄弟节点。
二、伪元素选择器
first-letter：该选择器对应的CSS样式对指定对象内的第一个字符起作用。
first-line：该选择器对应的CSS样式对指定对象内的第一行内容起作用。
before：该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入内容。
after：该选择器与内容相关的属性结合使用，用于在指定对象内部的尾端添加内容。
示例：
/*p元素里第一个字母加粗、变蓝*/
p:first-line{
color:#00f;
font-size:30pt;
font-weight:bold;
}
include-sourse：该属性的值应为URL，插入绝对或相对URL地址所对应的文档。
content：该属性可以是字符串、URL、attr、counter、open-quote、close-quote等格式。该属性用于向指定元素之前或之后插入指定内容。
quotes：该属性用于为content属性定义open-quote和close-quote，该属性的值可以是两个以空格分隔的字符串，其中前面的字符串是open-quote，后面的字符串是close-quote。
counter-increment：该属性用于定义一个计数器。
counter-reset：该属性用于对指定的计数值复位。
三、CSS3新增的伪类选择器
伪类选择器主要分为：结构性伪类选择器、UI元素状态伪类选择器、其他伪类选择器。
1.结构性伪类选择器
结构性伪类选择器指的是根据HTML元素之间的结构关键进行筛选的伪类选择器：
Selector:root：匹配文档的根元素。在HTML文档中，根元素永远是<html…/>元素。
Selector:first-child：匹配符合Selector选择器，而且必须是其父元素的第一个子节点的元素。
Selector:last-child：匹配符合Selector选择器，而且必须是其父元素的最后一个子节点的元素。
Selector:nth-child(n)：匹配符合Selector选择器，而且必须是其父元素的第n个子节点的元素。
Selector:nth-last-child(n)：匹配符合Selector选择器，而且必须是其父元素的倒数第n个子节点的元素。
2.UI元素状态伪类选择器
UI元素状态伪类选择器主要用于根据UI元素的状态进行筛选：
Selector:link：匹配Selector选择器且未被访问前的元素（通常只能是超链接）。
Selector:visited：匹配Selector选择器且已被访问过的元素（通常只能是超链接）。
Selector:active：匹配Selector选择器且处于被用户激活（在鼠标点击与释放之间的事件）状态的元素。
Selector:hover：匹配Selector选择器且处于鼠标悬停状态的元素。
Selector:focus：匹配Selector选择器且已得到焦点的元素。
Selector:enabled：匹配Selector选择器且处于鼠标悬停状态的元素。
Selector:disabled：匹配Selector选择器且处于不可用状态的元素。
Selector:checked：匹配Selector选择器且处于选中状态的元素。
3.其他伪类选择器
:target伪类选择器：Selector:target：匹配符合Selector选择器，必须是命名锚点目标且必须是当前正在访问的元素。
:not伪类选择器：Selector1:not(Selector2)：匹配符合Selector1选择器，但不符合Selector2选择器的元素。
这是一些比较常用的选择器。