存否和值选择器
这些选择器允许基于一个元素自身是否存在(例如href
)或者基于各式不同的按属性值的匹配,来选取元素。
选择器 | 示例 | 描述 |
---|---|---|
[attr] |
a[title] |
匹配带有一个名为attr的属性的元素——方括号里的值。 |
[attr=value] |
a[href="https://example.com"] |
匹配带有一个名为attr的属性的元素,其值正为value——引号中的字符串。 |
[attr~=value] |
p[class~="special"] |
匹配带有一个名为attr的属性的元素 ,其值正为value,或者匹配带有一个attr属性的元素,其值有一个或者更多,至少有一个和value匹配。 注意,在一列中的好几个值,是用空格隔开的。 |
[attr|=value] |
div[lang|="zh"] |
匹配带有一个名为attr的属性的元素,其值可正为value,或者开始为value,后面紧随着一个连字符。 |
下面的示例中,你可以看到这些选择器是怎样使用的。
- 使用
li[class]
,我们就能匹配任何有class属性的选择器。这匹配了除了第一项以外的所有项。 li[class="a"]
匹配带有一个a
类的选择器,不过不会选中一部分值为a
而另一部分是另一个用空格隔开的值的类,它选中了第二项。li[class~="a"]
会匹配一个a
类,不过也可以匹配一列用空格分开、包含a
类的值,它选中了第二和第三项。
子字符串匹配选择器
这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如,如果你有box-warning
和box-error
类,想把开头为“box-”字符串的每个物件都匹配上的话,你可以用[class^="box-"]
来把它们两个都选中。
选择器 | 示例 | 描述 |
---|---|---|
[attr^=value] |
li[class^="box-"] |
匹配带有一个名为attr的属性的元素,其值开头为value子字符串。 |
[attr$=value] |
li[class$="-box"] |
匹配带有一个名为attr的属性的元素,其值结尾为value子字符串 |
[attr*=value] |
li[class*="box"] |
匹配带有一个名为attr的属性的元素,其值的字符串中的任何地方,至少出现了一次value子字符串。 |
下个示例展示了这些选择器的用法:
li[class^="a"]
匹配了任何值开头为a
的属性,于是匹配了前两项。li[class$="a"]
匹配了任何值结尾为a
的属性,于是匹配了第一和第三项。li[class*="a"]
匹配了任何值的字符串中出现了a
的属性,于是匹配了所有项。
伪类 :类是一个选择处于特定状态的元素的选择器,比如它们是这一类型的第一个元素的时候,或者是鼠标指针悬浮在上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样,帮你在你的标记文本中减少多余的类,让你的代码更灵活、更易于维护。
选择器 | 描述 |
---|---|
:active |
在用户激活(例如点击)元素的时候匹配。 |
:any-link |
匹配一个链接的:link 和:visited 状态。 |
:blank |
匹配空输入值的<input> 元素。 |
:checked |
匹配处于选中状态的单选或者复选框。 |
:current |
匹配正在展示的元素,或者其上级元素。 |
:default |
匹配一组相似的元素中默认的一个或者更多的UI元素。 |
:dir |
基于其方向性(HTMLdir 属性或者CSSdirection 属性的值)匹配一个元素。 |
:disabled |
匹配处于关闭状态的用户界面元素 |
:empty |
匹配除了可能存在的空格外,没有子元素的元素。 |
:enabled |
匹配处于开启状态的用户界面元素。 |
:first |
匹配分页媒体的第一页。 |
:first-child |
匹配兄弟元素中的第一个元素。 |
:first-of-type |
匹配兄弟元素中第一个某种类型的元素。 |
:focus |
当一个元素有焦点的时候匹配。 |
:focus-visible |
当元素有焦点,且焦点对用户可见的时候匹配。 |
:focus-within |
匹配有焦点的元素,以及子代元素有焦点的元素。 |
:future |
匹配当前元素之后的元素。 |
:hover |
当用户悬浮到一个元素之上的时候匹配。 |
:indeterminate |
匹配未定态值的UI元素,通常为复选框。 |
:in-range |
用一个区间匹配元素,当值处于区间之内时匹配。 |
:invalid |
匹配诸如<input> 的位于不可用状态的元素。 |
:lang |
基于语言(HTMLlang属性的值)匹配元素。 |
:last-child |
匹配兄弟元素中最末的那个元素。 |
:last-of-type |
匹配兄弟元素中最后一个某种类型的元素。 |
:left |
在分页媒体中,匹配左手边的页。 |
:link |
匹配未曾访问的链接。 |
:local-link |
匹配指向和当前文档同一网站页面的链接。 |
:is() |
匹配传入的选择器列表中的任何选择器。 |
:not |
匹配作为值传入自身的选择器未匹配的物件。 |
:nth-child |
匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配(比如2n+1匹配元素1、3、5、7等。即所有的奇数个)。 |
:nth-of-type |
匹配某种类型的一列兄弟元素(比如,<p> 元素)——兄弟元素按照an+b形式的式子进行匹配(比如2n+1匹配元素1、3、5、7等。即所有的奇数个)。 |
:nth-last-child |
匹配一列兄弟元素,从后往前倒数。兄弟元素按照an+b形式的式子进行匹配(比如2n+1匹配按照顺序来的最后一个元素,然后往前两个,再往前两个,诸如此类。从后往前数的所有奇数个)。 |
:nth-last-of-type |
匹配某种类型的一列兄弟元素(比如,<p> 元素),从后往前倒数。兄弟元素按照an+b形式的式子进行匹配(比如2n+1匹配按照顺序来的最后一个元素,然后往前两个,再往前两个,诸如此类。从后往前数的所有奇数个)。 |
:only-child |
匹配没有兄弟元素的元素。 |
:only-of-type |
匹配兄弟元素中某类型仅有的元素。 |
:optional |
匹配不是必填的form元素。 |
:out-of-range |
按区间匹配元素,当值不在区间内的的时候匹配。 |
:past |
匹配当前元素之前的元素。 |
:placeholder-shown |
匹配显示占位文字的input元素。 |
:playing |
匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的,且正在“播放”的元素。 |
:paused |
匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的,且正在“暂停”的元素。 |
:read-only |
匹配用户不可更改的元素。 |
:read-write |
匹配用户可更改的元素。 |
:required |
匹配必填的form元素。 |
:right |
在分页媒体中,匹配右手边的页。 |
:root |
匹配文档的根元素。 |
:scope |
匹配任何为参考点元素的的元素。 |
:valid |
匹配诸如<input> 元素的处于可用状态的元素。 |
:target |
匹配当前URL目标的元素(例如如果它有一个匹配当前URL分段的元素)。 |
:visited |
匹配已访问链接。 |
伪元素:伪元素以类似方式表现,不过表现得是像你往标记文本中加入全新的HTML元素一样,而不是向现有的元素上应用类。伪元素开头为双冒号::
。
选择器 | 描述 |
---|---|
::after |
匹配出现在原有元素的实际内容之后的一个可样式化元素。 |
::before |
匹配出现在原有元素的实际内容之前的一个可样式化元素。 |
::first-letter |
匹配元素的第一个字母。 |
::first-line |
匹配包含此伪元素的元素的第一行。 |
::grammar-error |
匹配文档中包含了浏览器标记的语法错误的那部分。 |
::selection |
匹配文档中被选择的那部分。 |
::spelling-error |
匹配文档中包含了浏览器标记的拼写错误的那部分。 |
优先级
一个选择器的优先级可以说是由四个部分相加 (分量),可以认为是个十百千 — 四位数的四个位数:
- 千位: 如果声明在
style
的属性(内联样式)则该位得一分。这样的声明没有选择器,所以它得分总是1000。 - 百位: 选择器中包含ID选择器则该位得一分。
- 十位: 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
- 个位:选择器中包含元素、伪元素选择器则该位得一分。
例:
选择器 | 千位 | 百位 | 十位 | 个位 | 优先级 |
---|---|---|---|---|---|
h1 |
0 | 0 | 0 | 1 | 0001 |
h1 + p::first-letter |
0 | 0 | 0 | 3 | 0003 |
li > a[href*="en-US"] > .inline-warning |
0 | 0 | 2 | 2 | 0022 |
#identifier |
0 | 1 | 0 | 0 | 0100 |
内联样式 | 1 | 0 | 0 | 0 | 1000 |