《图解CSS3》学习记录（02-选择器）

选择器整理

通常比较熟悉的就不赘述了，主要记录一些不常用但记得不牢的：

*，Element，#id，.class

群组选择器：

.selector1.selector2...selectorN。群组选择器必须全部匹配，即满足所有选择器特征。

层次选择器：

.selector1 .selector2：后代选择器，中间有一个空格；

.selector1>.selector2：子选择器；

.selector1+.selector2：相邻兄弟选择器（.selector2紧位于.selector1后面）；

.selector1~.selector2：通用选择器，匹配.selector1元素后所有匹配.selector2的；

动态伪类选择器：

E:link：未访问的链接；

E:visited：未访问的链接；

E:active：元素被激活，常用于锚点链接，鼠标按下时触发；

E:hover：鼠标悬停在元素上时触发；

E:focus：元素获得焦点时触发；

目标伪类选择器：

E:target，用来匹配文档的URI中某一个标识符的目标元素（手风琴效果）；

UI元素状态伪类选择器（主要用于form表单元素，包含启用，禁用，选中，未选中，获得焦点，失去焦点，锁定和待机等）：

E:checked：匹配所有选中的复选按钮和单选按钮表单元素；

E:enabled：匹配所有启用的表单元素；

E:disabled：匹配所有禁用的表单元素；

结构伪类选择器：

E:first-child：作为父元素的第一个子元素E；

E:last-child：作为父元素的最后一个子元素E；

以上两项比较常用，通常用于处理列表第一个或者最后一个元素特殊的边距问题。

E:root：匹配Element所在文档的跟元素，Html中，根元素始终是html；

E F:nth-child(n)：匹配父元素E的第n个子元素F，n可以是整数，也可以是关键字（even、odd），还可以是公式（2n+1，-n+5），而且n的起始值是0；

E F:nth-last-child(n)：与E F:nth-child(n)顺序相反；

E:first-of-type:选择父元素内具有指定类型的第一个E元素;

E:last-of-type:选择父元素内具有指定类型的最后一个E元素;

E:nth-of-type(n)：选择父元素内具有指定类型的第n个E元素；

E:nth-last-of-type(n)：与E:nth-of-type(n)顺序相反；

E:only-child：匹配父元素只包含一个子元素，且该子元素匹配E元素；

E:only-of-type：匹配父元素只包含一个同类型的子元素，且该子元素匹配E元素；

E:empty：匹配没有子元素的元素，且该元素也不包含任何文本节点；

否定伪类选择器：

E:not(F)：匹配所有除F以外的E元素；