| 选择器 |
描述 |
示例 |
:link |
匹配尚未访问的链接。 |
a:link { color: blue } |
:visited |
匹配已访问的链接。 |
a:visited { color: purple } |
:active |
匹配被激活的元素，例如被点击的链接。 |
a:active { color: red } |
:hover |
匹配鼠标光标悬停在其上的元素。 |
a:hover { text-decoration: none } |
:focus |
匹配获得焦点的元素，例如通过 Tab 键选中的元素。 |
a:focus { border: 1px solid yellow } |
:target |
匹配被链接到的元素（例如通过 <a href="#x"…）。 |
h2:target { color: red }
/* 匹配被链接到的二级标题 */ |
:lang() |
匹配给定语言的元素。 |
p:lang(fr) { color: red }
/* 匹配声明为或被认为是法语的段落 */ |
:first-child |
匹配元素的第一个子元素。 |
p:first-child { color: red }
/* 匹配作为元素第一个子元素且为段落的元素 */ |
:last-child |
匹配元素的最后一个子元素。 |
div p:last-child { color: blue }
/* 匹配作为元素最后一个子元素且为段落的元素 */ |
:first-of-type |
匹配元素内同类型的第一个同级元素。 |
li:first-of-type { color: red }
/* 匹配元素内的第一个列表项 */ |
:last-of-type |
匹配元素内同类型的最后一个同级元素。 |
li:last-of-type { color: blue }
/* 匹配元素内的最后一个列表项 */ |
:nth-child() |
匹配作为其父元素的序数子元素的元素。 |
p:nth-child(3) { color: red }
/* 匹配作为元素第三个子元素且为段落的元素 */ |
:nth-last-child() |
匹配作为其父元素的倒序序数子元素的元素。 |
p:nth-last-child(2) { color: blue }
/* 匹配作为元素倒数第二个子元素且为段落的元素 */ |
:nth-of-type() |
匹配同类型序数同级元素的元素。 |
li:nth-of-type(5) { color: red }
/* 匹配元素内的第五个列表项 */ |
:nth-last-of-type() |
匹配同类型倒序序数同级元素的元素。 |
li:nth-of-type(5) { color: red }
/* 匹配元素内倒数第二个列表项 */ |
:only-child |
当元素是其父元素的唯一子元素时匹配该元素。 |
article p:only-child { color: red }
/* 匹配作为 article 元素的唯一子元素且为段落的元素 */ |
:only-of-type |
当元素是其同类型唯一同级元素时匹配该元素。 |
article aside:only-of-type { color: blue }
/* 匹配作为 article 元素中唯一 aside 元素的 aside 元素 */ |
:empty |
匹配没有子元素或内容的元素。 |
td:empty { border-color: red }
/* 匹配内部没有任何内容的表单元格 */ |
:root |
匹配文档的根元素。在 HTML 中，这将是 html 元素。 |
:root { background: yellow } |
:enabled |
匹配未被禁用的表单控件元素。 |
input:enabled { border-color: lime }
/* 匹配未被禁用的 input 元素 */ |
:disabled |
匹配被禁用的表单控件元素。 |
input:enabled { border-color: red }
/* 匹配被禁用的 input 元素 */ |
:checked |
匹配被选中的单选按钮或复选框类型的 input 元素。 |
input:checked { outline: 3px solid yellow }
/* 匹配被选中的 input 元素 */ |
:not() |
否定伪类。匹配不符合某个选择器的元素。 |
p:not(:first-child) { color: orange }
/* 匹配不是第一个子元素的段落 */ |
