选择器是CSS的核心组件。本文依据W3C的Selectors Level 4规范,概括总结了Level1-Level4中绝大多数的选择器,并做了简单的语法说明及示例演示。希望对程序员有所助益。
类型选择器也可以称为标签名选择器,会选中文档中该类型元素的实例。
将文档中元素类型为h1的颜色设置成红色。
通用选择器是一种特殊类型选择器,表示任何元素类型的元素。
设置文档中所有元素的颜色为红色。
选中元素 h1
中具有属性 name
的元素。
匹配元素 h1
中包含属性 title
并且属性值是 cool
的元素。
匹配元素 h1
中包含属性 title
并且属性值中包含 cool
的元素。
匹配元素 h1
中包含属性 title
,并且属性值是 cool
的元素 或以 cool-
开头的元素。
匹配元素 h1
中包含属性 title
,并且属性值串以 cool
开头的元素。
匹配元素 h1
中包含属性 title
,并且属性值串以 cool
结尾的元素。
匹配元素 h1
中包含属性 title
,并且属性值串包含 cool
子串的元素。
匹配文档中 class
属性为 red
的元素并设置其颜色为红色。
匹配文档中 id
属性为 title
的元素并设置其颜色为红色。
dir()
主要用于匹配符合某个方向性的元素,例如 :dir(ltr)
和 :dir(rtl)
,其中ltr是left to right简写,表示从左向右,而rtl是right to left,表示从右向左。
匹配文字方向为从左到右的元素。
匹配语言为法语的元素并设置其颜色为红色。
匹配带有 href
属性的 <a>
、<link>
、<area>
等元素。
匹配任意超链接,并设置其颜色为红色。
匹配未被访问的超链接,并设置其颜色为红色。
匹配访问过的超链接,并设置其颜色为蓝色。
匹配本地超链接,并设置其颜色为红色。
点击 html
代码中的内部链接,链接的目标对象 id
为 content
的 p元素颜色变为红色。
用户指针设备悬停于指定元素时,匹配该元素。
用户指针悬停于某元素,匹配该元素并将其设置其颜色为红色。
当特定元素处于激活状态时,设置元素背景色为红色。
当特定元素获得焦点,设置元素背景色为红色。
当div中的子元素获得输入焦点时,设置div元素边框为1象素值的蓝色边框。
在文档的语音渲染或是显示字幕期间,常会用到时间轴伪类。
以上规则定义了当前语音渲染段落的颜色为红色。
以上规则定义了以完成语音渲染段落的颜色为蓝色。
以上规则定义了以未进行语音渲染段落的颜色为黄色。
匹配当前播放状态的元素,并为其添加1象素的红色边框。
匹配当前播放状态的元素,并为其添加1象素的灰色边框。
匹配启用状态的元素并设置其颜色为红色。
匹配禁用状态的元素并设置其颜色为黄色。
匹配只读状态的元素并设置其颜色为红色。
匹配读写状态的元素并设置其颜色为黄色。
选中占位符为显示状态的元素并设置其背景色为红色。
匹配缺省的元素并设置其颜色为红色。
匹配选中的元素并将其高度设成 4em
。
不确定值伪类 :indeterminate
适用于其值处在不确定状态的元素。例如 : radio
元素组在未被初始选择的情况下就为不确定值状态。
匹配不确定值元素并设置高度为 4em
。
空值伪类 :blank
用来匹配输入值为空的输入框,如 textarea
或 input
框。
目前该伪类兼容性较差。
匹配输入值合法的元素并设置其颜色为红色。
匹配输入值不合法的元素并设置其颜色为蓝色。
匹配输入值在定义范围内的元素并设置其颜色为红色。
匹配输入值不在定义范围内的元素并设置其颜色为蓝色。
匹配定义为必填项的元素并设置其颜色为红色。
匹配定义为选填项的元素并设置其颜色为蓝色。
伪类 :root
表示文档的根元素。例如,在DOM文档中,伪类 :root
与Document对象的根元素匹配。 在HTML中,就表示html元素。
匹配文档根元素并定义其颜色为红色。
匹配为空的元素并设置其颜色为红色。
匹配第1,4,7,10等 p
元素并设置其颜色为红色。
匹配倒数第1,4,7,10等 p
元素并设置其颜色为红色。
匹配第一个 p
元素并设置其颜色为红色。
匹配最后一个 p
元素并设置其颜色为红色。
匹配父元素只包含唯一子元素的元素 p
并设置其颜色为红色。
匹配类型为 p
的第1,4,7,10等索引位置的元素并设置其颜色为红色。
匹配类型为 p
的倒数第1,4,7,10等索引位置的元素并设置其颜色为红色。
匹配第一个类型为 p
的元素并设置及颜色为红色。
匹配倒数第一个类型为 p
的元素并设置及颜色为红色。
匹配父元素只包含唯一类型为 p
子元素并设置其颜色为红色。
利用分组选则器,可以将上述CSS规则简写成下面的形式。
上述两种写法效果相同。
伪类 :is()
是一个以多个选择器做为参数的函数,匹配由其参数表示的元素。
目前兼容性较差。
匹配伪类 hover
和 focus
的元素并设置其颜色为红色。
负向逻辑组合伪类 :not()
是一个以多个选择器做为参数的函数,匹配不在其参数表中的元素。
目前兼容性较差。
匹配不包含 DISABLED
属性的 button
元素并设置其颜色为红色。
目前兼容性较差。
匹配包含 img
子元素的超链接并设置其边框为1象素红色。
匹配 h1
的后代的 em
元素并设置其颜色为红色。
匹配 h1
的子元素 em
并设置其颜色为红色。
匹配 h1
的相邻兄弟元素 h2
并设置其颜色为红色。
匹配 h1
的后面的同级结点 h2
并设置其颜色为红色。
W3C Working Draft : Selectors Level 4 - 21 November 2018
本文是@毛瑞依据CSS选择器规范4择取的部分CSS选择器内容编写而成。因本人水平有限,理解和翻译时难免有偏差和错误,还请程序员朋友多多指正!
文中一些选择器兼容性还很差,只能做为学习储备,不适用于实际产品中运用。
费力原创十分不易,请大家转载时一定要明确注明出处来自【三十课】!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。