元素选择器

*

通配选择器

匹配所有元素。

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

CSS选择器

目录

概述

通配选择器