CSS中常用的选择器

属性选择器

E[att] {} : 选择具有att属性的E元素。 
E[att="val"] {} : 选择具有att属性且属性值等于val的E元素。 
E[att~="val"] {}:用于选取属性值中包含指定单词的元素，不是词汇但是有此字符串的也不行。
E[att|="val"] {}:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

E[att*="val"] {}:选择具有att属性且属性值为包含val的字符串的E元素。
E[att^="val"] {}:选择具有att属性且属性值为以val开头的字符串的E元素
E[att$="val"] {}:选择具有att属性且属性值为以val结尾的字符串的E元素

伪类选择器

p:root{}            将样式绑定到页面的根元素中
p:not(.p1){}          排除p标签中类名为p1的选择器样式
p:empty{}           使用该选择器来制定当元素内容为空白时使用的样式
p:first-child {}    单独指定第一个子元素的样式
p:last-child {}     单独指定最后一个子元素的样式

p:nth-child(odd)与nth-child(even)
/*不足之处：nth-child选择器在计算子元素时，第奇数个元素还是偶数个元素时，是连同父元素内的所有子元素一起计算的（默认匹配他们得是相同的子元素*/
p:nth-of-type(odd)奇数和
nth-of-type(even)偶数和

循环使用样式

p:nth-child(n){}选取每一行
/*n:所有的行
	2n:每2行选择一行
	3n:每3行选择一行
	n+2:除第1行外所有的行
	2n+4:从第4行开始隔1行选择1行*/
p:nth-last-child(n){} 从后向前选择,n为参数
	/*--n:所有行
	2:倒数第2行
	-n+3:最后3行*/
p:only-child{}只有一个元素时使用。用于当用户删除信息，当仅剩一个时会出现警告，背景变成红色等等。

目标伪类选择器

p:target{使该选择器来对页面中的某个target元素（锚记链接）指定样式，当跳转到某个锚点时，此锚点会出现指定的样式改变。}

UI元素状态伪类选择器

E:enabled     匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled     匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked     匹配所有用户界面（form表单）中处于选中状态的元素E
E::selection  匹配E元素中被用户选中或处于高亮状态的部分,相当于复制粘贴时，要选择某些文本，背景颜色会处于高亮部分。

动态伪类选择器

E:link{}  选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。
E:visited{}选择匹配的E元素，而且匹配元素被定义超链接并已被访问过。
E:active{} 选择匹配的E元素，且匹配元素被激活。(常用于描点和按钮)
E:hover{}  选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus{}  选择匹配的E元素，对获取焦点所匹配的E元素进行样式的修改。

伪类和伪元素区别

/*css伪类：状态伪类基于元素当前状态进行选择的。结构伪类利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素。
css伪元素：对元素中的特定内容进行操作，而不是描述状态
css3为了区分两者伪类使用单冒号，伪元素使用双冒号，但因为兼容问题现在大部分还是用单冒号*/
伪类一般包括：
:active       将样式添加到被激活的元素
:link{}       将特殊的样式添加到未被访问的链接。
:visited{}    将特殊的样式添加到已被访问的链接。
:hover{}      当鼠标悬浮在元素上方时，向元素添加样式。
:focus{}      将样式添加到被选中的元素。
:first-child  将特殊的样式添加到元素的第一个子元素。
:lang         允许创作者来定义指定的元素中使用的语言。

伪元素一般包括：
:first-letter	将特殊的样式添加到文本的首字母。
:first-line		将特殊的样式添加到文本的首行。
:before			在某元素之前插入某些内容。
:after			在某元素之后插入某些内容。

层级选择器

相邻兄弟选择器：li+li :后边紧相邻的选择器会被选中，第一个li不会被选中，注意不是相邻的子类，而是同级关系。

通用兄弟选择器：li~li ：后面的所有li元素都会被选中

子选择器：ul>li :ul后面直接的li元素会被选中