共计 字 • 阅读约 min

属性选择器

存否和值选择器

这些选择器允许基于一个元素自身是否存在(例如 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

示例链接:https://mdn.github.io/css-examples/learn/selectors/attribute.html

子字符串匹配选择器

这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如,如果你有 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 的属性,于是匹配了所有项。

示例链接:https://mdn.github.io/css-examples/learn/selectors/attribute-substring.html

伪类选择器

选择器 描述
:active 在用户激活(例如点击)元素的时候匹配。
:any-link 匹配一个链接的:link 和:visited 状态。
:blank 匹配空输入
:checked 匹配处于选中状态的单选或者复选框。
:current(en-US) 匹配正在展示的元素,或者其上级元素。
:default 匹配一组相似的元素中默认的一个或者更多的 UI 元素。
:dir 基于其方向性(HTMLdir 属性或者 CSSdirection 属性的值)匹配一个元素。
:disabled 匹配处于关闭状态的用户界面元素
:empty 匹配除了可能存在的空格外,没有子元素的元素。
:enabled 匹配处于开启状态的用户界面元素。
:first 匹配分页媒体的第一页。
:first-child 匹配兄弟元素中的第一个元素。
:first-of-type 匹配兄弟元素中第一个某种类型的元素。
:focus 当一个元素有焦点的时候匹配。
:focus-visible 当元素有焦点,且焦点对用户可见的时候匹配。
:focus-within 匹配有焦点的元素,以及子代元素有焦点的元素。
:future(en-US) 匹配当前元素之后的元素。
:hover 当用户悬浮到一个元素之上的时候匹配。
:indeterminate 匹配未定态值的 UI 元素,通常为复选框
:in-range 用一个区间匹配元素,当值处于区间之内时匹配。
:invalid 匹配诸如的位于不可用状态的元素。
:lang 基于语言(HTMLlang 属性的值)匹配元素。
:last-child 匹配兄弟元素中最末的那个元素。
:last-of-type 匹配兄弟元素中最后一个某种类型的元素。
:left 分页媒体 (en-US)中,匹配左手边的页。
:link 匹配未曾访问的链接。
:local-link(en-US) 匹配指向和当前文档同一网站页面的链接。
:is() 匹配传入的选择器列表中的任何选择器。
:not 匹配作为值传入自身的选择器未匹配的物件。
:nth-child 匹配一列兄弟元素中的元素——兄弟元素按照 an+b 形式的式子进行匹配(比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个)。
:nth-of-type 匹配某种类型的一列兄弟元素(比如,

元素)——兄弟元素按照 an+b 形式的式子进行匹配(比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个)。

:nth-last-child 匹配一列兄弟元素,从后往前倒数。兄弟元素按照 an+b 形式的式子进行匹配(比如 2n+1 匹配按照顺序来的最后一个元素,然后往前两个,再往前两个,诸如此类。从后往前数的所有奇数个)。
:nth-last-of-type 匹配某种类型的一列兄弟元素(比如,

元素),从后往前倒数。兄弟元素按照 an+b 形式的式子进行匹配(比如 2n+1 匹配按照顺序来的最后一个元素,然后往前两个,再往前两个,诸如此类。从后往前数的所有奇数个)。

:only-child 匹配没有兄弟元素的元素。
:only-of-type 匹配兄弟元素中某类型仅有的元素。
:optional 匹配不是必填的 form 元素。
:out-of-range 按区间匹配元素,当值不在区间内的的时候匹配。
:past(en-US) 匹配当前元素之前的元素。
:placeholder-shown 匹配显示占位文字的 input 元素。
:playing(en-US) 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的,且正在“播放”的元素。
:paused(en-US) 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的,且正在“暂停”的元素。
:read-only 匹配用户不可更改的元素。
:read-write 匹配用户可更改的元素。
:required 匹配必填的 form 元素。
:right 分页媒体 (en-US)中,匹配右手边的页。
:root 匹配文档的根元素。
:scope 匹配任何为参考点元素的的元素。
:valid 匹配诸如元素的处于可用状态的元素。
:target 匹配当前 URL 目标的元素(例如如果它有一个匹配当前 URL 分段的元素)。
:visited 匹配已访问链接。

伪元素

选择器 描述
::after 匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before 匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-letter 匹配元素的第一个字母。
::first-line 匹配包含此伪元素的元素的第一行。
::grammar-error 匹配文档中包含了浏览器标记的语法错误的那部分。
::selection 匹配文档中被选择的那部分。
::spelling-error 匹配文档中包含了浏览器标记的拼写错误的那部分。

关系选择器

后代选择器

后代选择器——典型用单个空格( )字符——组合两个选择器,比如,第二个选择器匹配的元素被选择,如果他们有一个祖先(父亲,父亲的父亲,父亲的父亲的父亲,等等)元素匹配第一个选择器。选择器利用后代组合符被称作后代选择器。

body article p

子代关系选择器

子代关系选择器是个大于号(>),只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。例如,只选中作为

的直接子元素的

元素:

article > p

通用兄弟

如果你想选中一个元素的兄弟元素,即使它们不直接相邻,你还是可以使用通用兄弟关系选择器(~)。要选中所有的

元素后任何地方元素,我们会这样做:

p ~ img

示例链接:https://mdn.github.io/css-examples/learn/selectors/general.html



文章更新于: 2022-1-28 14:45:57