选择器整理

1. 简单选择器
E F
匹配所有被E包含的F元素集合。

E>F
匹配E元素的所有一级子元素F。

E+F
匹配紧跟在E元素之后的F元素。

E~F
匹配E元素后面的所有F兄弟元素，同级同类。

E,F
同时为多个选择器设置相同的CSS样式规则。

2. 结构伪类选择器
E：not(s)
从E匹配的元素集合中删除s选择器参数所匹配的元素。
若s有子元素，不会对其子元素产生影响。

E：root
匹配文档中E的根元素，E一般为html。

E：lang(s)
使用s语言时的E元素的样式。

E：empty( )
匹配内容为空的E类型元素。

E：target
匹配被激活的目标元素，点击锚点链接时，目标元素被激活。

E：first-child、E：last-child、E：only-child
匹配类型为E的父元素、下的第一个/最后一个/唯一一个子元素（E为css选择器）。
注意，不是E的第一个子元素，而是父元素下的第一个E类型。

E：nth-child(n)、E：nth-last-child(n)
匹配为E类型的父元素、的第n个子元素、倒数第n个子元素。

E：first-of-type、E：last-of-type、E：only-of-type
匹配父元素下E类型子元素集合中，处于同标签类型第一位/最后一位/唯一的元素。
注意，匹配E类型，且元素必须处于同标签类型元素集合的第一位。

E：nth-of-type(n)、E：nth-last-of-type(n)
匹配E类型元素且位于父元素下同类型标签兄弟元素的第n位、倒数第n位。

E：optional、E：required
匹配非必需（不具有required属性）表单元素与必需（具有required属性）表单元素。

E：out-of-range
匹配值不在指定区间的表单元素。
表单元素可以通过min或者max设置最大值和最小值。
如果值不在min与max指定的区间之内，那么此表单元素可以被选择器匹配。

E：read-only、E：read-write
匹配只读（具有readonly属性）表单元素与可读写表单元素。

E：valid
匹配HTML5表单验证通过的元素。

3. 动态伪类选择器
E：link、E：visited
匹配未访问过的与已访问的链接< a>。（a:link{…}、a:visited{…}）

E:hover、E:active、E:focus
鼠标经过（悬停）、鼠标按下但未松开、鼠标获得焦点（点击后松开）

E：focus-within
匹配鼠标获得焦点的元素与其父辈元素。

4. UI元素状态伪类选择器
E:enable、E:disable
匹配处于可用、不可用状态的元素。

E:checked、E:default
checked用来制指定当表单中的radio单选框、checkbox复选框处于选取状态时的样式。
default选择器匹配默认选中的复选框。

E:selection
用来指定当元素处于选中状态时的样式

5. 打印伪类选择器
@page:first
设置页面容器第一页使用的样式。

@page:left、@page:right
设置页面容器位于装订线左边/右边的所有页面使用的样式。

6. 伪元素选择器
E::selection
匹配被选中的文本。（div::selection{…}）

E::before、E::after
设置在对象前/后（依据对象树的逻辑结构）产生的内容。

E::first-line、E::first-letter
匹配元素内第一行/第一个字符（仅块级元素）。

content
规定插入的字符串内容，通常要和伪类选择器一起使用。
E::after{content："…";}表示在E元素后插入文字“…”。

7. 属性选择器
E[attr]
匹配具有attr属性的元素。（div[class]{…}）

E[attr=“val”]
具有attr属性且属性值等于val的元素E。

E[attr~=“val”]
具有多个attr属性且属性值包含val的元素E。

E[attr^=“val”]、E[attr $ =“val”]、E[attr*=“val”]
匹配具有attr属性且属性值以val开头的/结尾的/包含的元素E。

E[attr|=“val”]
匹配具有attr属性，且属性值是以"val"开头并用"-"分割的元素E。