选择器         例子     例子描述

element1~element2 p~ul 选择前面有 p元素的每个 ul元素。

[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 元素。

[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 元素。

[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 a元素。

:first-of-type p:first-of-type 选择属于其父元素的首个 p 元素的每个 p元素。

:last-of-type p:last-of-type 选择属于其父元素的最后 p 元素的每个 p元素。

:only-of-type p:only-of-type 选择属于其父元素唯一的 p 元素的每个p 元素。

:only-child p:only-child 选择属于其父元素的唯一子元素的每个 p元素。

:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p元素。

:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。

:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个p元素的每个

元素。

:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。

:last-child p:last-child 选择属于其父元素最后一个子元素每个

元素。

:root :root 选择文档的根元素。

:empty p:empty 选择没有子元素的每个 p>元素（包括文本节点）。

:target #news:target 选择当前活动的 #news 元素。

:enabled input:enabled 选择每个启用的 input 元素。

:disabled input:disabled 选择每个禁用的 input 元素

:checked input:checked 选择每个被选中的 input>元素。

:not(selector) :not(p) 选择非 p元素的每个元素。

::selection ::selection 选择被用户选取的元素部分。

通用兄弟选择器、伪类选择器、伪元素选择器、否定选择器、状态伪类选择器

1.新增属性选择器：

E[foo^='bar'] 匹配E元素，该元素包含foo属性，且foo属性值以bar开头

E[foo$='bar'] 匹配E元素，该元素包含foo属性，且foo属性值以bar结尾

E[foo*='bar'] 匹配E元素，该元素包含foo属性，且foo属性值包含bar字符串

2.新增结构伪类选择器：

E:root 匹配文档所在的根元素

E:nth-child(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素也参与排序，若第n个子元素不是E元素，则该语句没有效果（注意这里的n从1开始）

E:nth-last-child(n) 匹配E所在父元素倒数第n个匹配E的元素

E:nth-of-type(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素不参与排序(n同样是从1开始）注意区别nth-child(n)

E:last-child

E:first-of-type

E:last-of-type

E:only-child

E:only-of-type

E:empty

属性选择器

- css2中的属性选择器
    [attr] :选择有属性为attr的元素
    [attr=val]  ：选择有属性attr并且属性值为val的元素
    [attr~=val] ：选择有属性attr，其值是一个词列表，且含有val的元素

-css3新增属性选择器
    [attr^=val] :选择有属性attr并且属性值以val开头的元素
    [attr$=val] ：选择有属性attr并且其属性值以val结尾的元素
    [attr*=val] ：选择有属性attr并且其属性值包含val的元素

结构性伪类选择器

E:first-child   ：选择其父元素中的第一个元素
E:last-child    ：选择其父元素中最后一个元素 
E:nth-child(n)   ：选择其父元素中的第n个元素
    n的值可以为：
        -0和正整数
        -n的倍数（*n）
        -odd | even (奇数 | 偶数)
E:nth-last-child(n)  :选择其父元素中倒数第n个元素,n的取值同上

E:first-of-type     ：选择其父元素中类型为E的第一个元素
E:last-of-type      ：选择其父元素中类型为E的倒数第一个元素
E:nth-of-type(n)    :选择其父元素中类型为E的第n个元素
E:nth-last-of-type(n)   ：选择其父元素中类型为E的倒数第n个元素

状态伪类选择器

- :enabled   :选择表单元素是可用状态的元素
- :disabled  ：选择表单元素为禁用状态下的元素
- :checked  ：选择多选框的表单元素为选中状态下的元素
- ::selection  ：元素被选中(一般是选中的的文字的样式)

element1~element2	p~ul	选择前面有 p 元素的每个 ul 元素。	3
[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个 a 元素。	3
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 a 元素。	3
[attribute*=value]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个 a元素。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个 p 元素的每个 p 元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后 p 元素的每个 p 元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的 p元素的每个 p 元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 p元素。	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 p 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 p元素的每个 p 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 p元素。	3
:root	:root	选择文档的根元素。	3
:empty	p:empty	选择没有子元素的每个 p 元素（包括文本节点和空格）。	3
:target	#news:target	选择当前活动的 #news 元素。	3
:enabled	input:enabled	选择每个启用的 input元素。	3
:disabled	input:disabled	选择每个禁用的 input 元素	3
:checked	input:checked	选择每个被选中的 input 元素。	3
:not(selector)	:not(p)	选择非 p 元素的每个元素。	3
::selection	::selection	选择被用户选取的元素部分。	3