当前位置：覃师宁博客 > CSS选择器

元素选择器: *
通配选择器
匹配所有元素。; li
类型选择器
匹配标签为 li 的元素。; #catalogue
id 选择器
匹配 id 属性值等于 catalogue 的元素。; .list
class 选择器
匹配 class 属性值包含 list 的元素。

关系选择器: #catalogue h3
后代选择器
匹配 #catalogue 元素内所有的 h3 元素。; #catalogue > h3
子元素选择器
匹配 #catalogue 元素子级的 h3 元素。

* 不支持：IE6; h1 + h2
相邻选择器
匹配 h1 元素之后紧跟的 h2 元素。

* 不支持：IE6; h1 ~ h2
兄弟选择
匹配 h1 元素之后所有的 h2 元素。

* 不支持：IE6

伪类选择器: h3:first-child

匹配同辈的所有元素中，第一个元素并且是 h3 的元素。

* 不支持：IE6; h3:last-child

匹配同辈的所有元素中，最后一个元素并且是 h3 的元素。

* 不支持：IE6-8; h3:first-of-type

匹配同辈的 h3 元素中，第一个 h3 元素。

* 不支持：IE6-8; h3:last-of-type

匹配同辈的 h3 元素中，最后一个 h3 元素。

* 不支持：IE6-8; h3:nth-child(2n)

匹配同辈的所有元素中，第 2n 个元素并且是 h3 的元素。

* 不支持：IE6-8; h3:nth-last-child(2n)

匹配同辈的所有元素中，倒数第 2n 个元素并且是 h3 的元素。

* 不支持：IE6-8; h3:nth-of-type(2n)

匹配同辈的 h3 元素中，第 2n 个 h3 元素。

* 不支持：IE6-8; h3:nth-last-of-type(2n)

匹配同辈的 h3 元素中，倒数第 2n 个 h3 元素。

* 不支持：IE6-8; .list dt:only-child

匹配同辈的所有元素中，只有一个元素并且是 dt 的元素。

* 不支持：IE6-8; .list dt:only-of-type

匹配同辈的 dt 元素中，只有一个 dt 元素时的 dt 元素。

* 不支持：IE6-8; .list:lang(zh)

匹配 lang 属性值等于 zh 的 .list 元素

* 不支持：IE6-7; ol:not(.list)

匹配 ol 元素中，不包含 .list 选择器规则的元素。

* 不支持：IE6-8; h3:empty

匹配不包含任何元素及内容的 h3 元素。

* 不支持：IE6-8; div:target

匹配 URL 井号(#)部分指向的 div 元素。

* 不支持：IE6-8; E:link

a 元素的链接地址在未被访问前的样式。

* 不进行演示; E:visited

a 元素的链接地址已被访问过的样式。

* 不进行演示; E:hover

鼠标悬停在 E 元素上时的样式

* IE6以下只支持 a 元素的 hover 样式

* 不进行演示; E:active

E 元素在被激活（在鼠标点击与释放之间发生的事件）时的样式。

* IE7以下只支持 a 元素的 active 样式

* 不进行演示; E:focus

E 元素在获得焦点时的样式。

* 不支持：IE6-7

* 不进行演示; E:root

匹配 E 元素在文档的根元素，在 HTML 中，根元素永远是 HTML。

* 不支持：IE6-8

* 不进行演示; E:checked

匹配选中状态的 E 元素。（用于 input type 为 radio 与 checkbox）

* 不支持：IE6-8

* 不进行演示; E:enabled

匹配可以正常使用的 E 元素。

* 不支持：IE6-8

* 不进行演示; E:disabled

匹配被禁止使用的 E 元素。（disabled="disabled"）

* 不支持：IE6-8

* 不进行演示

伪元素选择器: .article:first-letter

设置 .talk 元素第一个字符的样式。

例：右侧首字大号字

* IE6 下选择符与花括号之间需有空格或换行; .talk:first-line

设置 .talk 元素第一行的样式。

例：右侧首行有浅灰色背景色

* IE6 下选择符与花括号之间需有空格或换行; .talk:before

设置 .talk 元素前的内容及样式。（与 content 属性一起使用）

例：右侧的<p class="talk">有深灰色背景色

* 不支持：IE6-7; .talk:after

设置 .talk 元素后的内容及样式。（与 content 属性一起使用）

例：右侧的</p>有深灰色背景色

* 不支持：IE6-7; .talk::selection

设置 .talk 元素被选择时的颜色。

例：用鼠标选中右侧 .talk 内的文字试试

* 不支持：IE6-8

属性选择器: a[class]

匹配具有 class 属性值的 a 的元素。

* 不支持：IE6; a[target="_blank"]

匹配 target 属性值等于 _blank 的 a 元素。

* 不支持：IE6; a[href^="https"]

匹配 href 属性值以 https 开头的 a 元素。

* 不支持：IE6; a[href$=".jpg"]

匹配 href 属性值以 .jpg 结尾的 a 元素。

* 不支持：IE6; a[href*="qinshining"]

匹配 href 属性值包含 qinshining 的 a 元素。

* 不支持：IE6; a[class|="abc"]

匹配 class 属性值以 abc 开头并跟着连接符“-”分割字符串的 a 元素。例：

color-
color-red
color-green-blue

* 不支持：IE6; a[class~="abc"]

匹配 class 属性值以空格为分隔符，其中有一个等于 abc 的 a 元素。

* 不支持：IE6