学习《CSS选择器Level-4》不完全版

原创 毛三十 译文 css 99阅读 2019-04-10 16:04:04 举报

1 概述

1.1 前言

选择器是CSS的核心组件。本文依据W3C的Selectors Level 4规范,概括总结了Level1-Level4中绝大多数的选择器,并做了简单的语法说明及示例演示。希望对程序员有所助益。

2 元素选择器

2.1 类型选择器-h1

类型选择器也可以称为标签名选择器,会选中文档中该类型元素的实例。

将文档中元素类型为h1的颜色设置成红色。

查看示例程序

2.2 通配选择器-*

通用选择器是一种特殊类型选择器,表示任何元素类型的元素。

设置文档中所有元素的颜色为红色。

3 属性选择器

3.1 属性存在选择器-[name]

选中元素 h1 中具有属性 name 的元素。

查看示例程序

3.2 属性值选择器

3.2.1 确切匹配-[title='cool']

匹配元素 h1 中包含属性 title 并且属性值是 cool 的元素。

查看示例程序

3.2.2 包含匹配-[title|='cool']

匹配元素 h1 中包含属性 title 并且属性值中包含 cool 的元素。

查看示例程序

3.2.3 头部匹配-[title^='cool']

匹配元素 h1 中包含属性 title ,并且属性值是 cool 的元素 或以 cool- 开头的元素。

查看示例程序

3.3 属性值子串选择器

3.3.1 头部匹配-[title^='cool']

匹配元素 h1 中包含属性 title ,并且属性值串以 cool 开头的元素。

查看示例程序

3.3.2 尾部匹配-[title$='cool']

匹配元素 h1 中包含属性 title ,并且属性值串以 cool 结尾的元素。

查看示例程序

3.3.3 部分匹配-[title*='cool']

匹配元素 h1 中包含属性 title ,并且属性值串包含 cool 子串的元素。

查看示例程序

3.4 类选择器-.class

匹配文档中 class 属性为 red 的元素并设置其颜色为红色。

查看示例程序

3.5 ID选择器-#id

匹配文档中 id 属性为 title 的元素并设置其颜色为红色。

查看示例程序

4 语言学伪类

4.1 方向性伪类:dir

dir() 主要用于匹配符合某个方向性的元素,例如 :dir(ltr):dir(rtl),其中ltr是left to right简写,表示从左向右,而rtl是right to left,表示从右向左。

匹配文字方向为从左到右的元素。

查看示例程序

4.2 语言伪类:lang

匹配语言为法语的元素并设置其颜色为红色。

查看示例程序

5 位置伪类

5.1 超链接伪类:any-link

匹配带有 href 属性的 <a><link><area>等元素。

匹配任意超链接,并设置其颜色为红色。

查看示例程序

5.2 超链接伪类:link

匹配未被访问的超链接,并设置其颜色为红色。

5.3 超链接伪类:visited

匹配访问过的超链接,并设置其颜色为蓝色。

查看示例程序

5.4 超链接伪类:local-link

匹配本地超链接,并设置其颜色为红色。

5.5 目标伪类:target

点击 html 代码中的内部链接,链接的目标对象 idcontent 的 p元素颜色变为红色。

6 用户行为伪类

6.1 用户行为伪类:hover

用户指针设备悬停于指定元素时,匹配该元素。

用户指针悬停于某元素,匹配该元素并将其设置其颜色为红色。

查看示例程序

6.2 用户行为伪类:active

当特定元素处于激活状态时,设置元素背景色为红色。

查看示例程序

6.3 用户行为伪类:focus

当特定元素获得焦点,设置元素背景色为红色。

查看示例程序

6.4 用户行为伪类:focus-within

当div中的子元素获得输入焦点时,设置div元素边框为1象素值的蓝色边框。

查看示例程序

7 时间轴伪类

7.1 时间伪类:current

在文档的语音渲染或是显示字幕期间,常会用到时间轴伪类。

以上规则定义了当前语音渲染段落的颜色为红色。

7.2 时间伪类:past

以上规则定义了以完成语音渲染段落的颜色为蓝色。

7.3 时间伪类:future

以上规则定义了以未进行语音渲染段落的颜色为黄色。

8 资源状态伪类

8.1 资源状态伪类:playing

匹配当前播放状态的元素,并为其添加1象素的红色边框。

8.2 资源状态伪类:paused

匹配当前播放状态的元素,并为其添加1象素的灰色边框。

9 输入伪类

9.1 输入状态控制伪类:enabled

匹配启用状态的元素并设置其颜色为红色。

9.2 输入状态控制伪类:disabled

匹配禁用状态的元素并设置其颜色为黄色。

查看示例程序

9.3 只读伪类:read-only

匹配只读状态的元素并设置其颜色为红色。

9.4 读写伪类:read-write

匹配读写状态的元素并设置其颜色为黄色。

查看示例程序

9.5 伪类:placeholder-shown

选中占位符为显示状态的元素并设置其背景色为红色。

查看示例程序

9.6 缺省项伪类:default

匹配缺省的元素并设置其颜色为红色。

查看示例程序

9.7 选中项伪类:checked

匹配选中的元素并将其高度设成 4em

查看示例程序

9.8 不确定值伪类:indeterminate

不确定值伪类 :indeterminate 适用于其值处在不确定状态的元素。例如 : radio 元素组在未被初始选择的情况下就为不确定值状态。

匹配不确定值元素并设置高度为 4em

查看示例程序

9.9 空值伪类:blank

空值伪类 :blank 用来匹配输入值为空的输入框,如 textareainput 框。

目前该伪类兼容性较差。

9.10 合规性验证伪类:valid

匹配输入值合法的元素并设置其颜色为红色。

9.11 合规性验证伪类:invalid

匹配输入值不合法的元素并设置其颜色为蓝色。

查看示例程序

9.12 范围伪类:in-range

匹配输入值在定义范围内的元素并设置其颜色为红色。

9.13 范围伪类:out-of-range

匹配输入值不在定义范围内的元素并设置其颜色为蓝色。

查看示例程序

9.14 必填项伪类:required

匹配定义为必填项的元素并设置其颜色为红色。

9.15 选填项伪类:optional

匹配定义为选填项的元素并设置其颜色为蓝色。

查看示例程序

10 树形结构伪类

10.1 根结点伪类:root

伪类 :root 表示文档的根元素。例如,在DOM文档中,伪类 :root 与Document对象的根元素匹配。 在HTML中,就表示html元素。

匹配文档根元素并定义其颜色为红色。

查看示例程序

10.2 空伪类:empty

匹配为空的元素并设置其颜色为红色。

查看示例程序

10.3 元素索引伪类:nth-child

匹配第1,4,7,10等 p 元素并设置其颜色为红色。

查看示例程序

10.4 元素索引伪类:nth-last-child

匹配倒数第1,4,7,10等 p 元素并设置其颜色为红色。

查看示例程序

10.5 首元素伪类:first-child

匹配第一个 p 元素并设置其颜色为红色。

查看示例程序

10.6 尾元素伪类:last-child

匹配最后一个 p 元素并设置其颜色为红色。

查看示例程序

10.7 唯一子元素伪类:only-child

匹配父元素只包含唯一子元素的元素 p 并设置其颜色为红色。

查看示例程序

10.8 类型索引伪类:nth-of-type

匹配类型为 p 的第1,4,7,10等索引位置的元素并设置其颜色为红色。

查看示例程序

10.9 类型索引伪类:nth-last-of-type

匹配类型为 p 的倒数第1,4,7,10等索引位置的元素并设置其颜色为红色。

查看示例程序

10.10 类型首元素伪类:first-of-type

匹配第一个类型为 p 的元素并设置及颜色为红色。

查看示例程序

10.11 类型尾元素伪类:last-of-type

匹配倒数第一个类型为 p 的元素并设置及颜色为红色。

查看示例程序

10.12 唯一类型元素伪类:only-of-type

匹配父元素只包含唯一类型为 p 子元素并设置其颜色为红色。

查看示例程序

11 逻辑组合选择器

11.1 分组选择器

利用分组选则器,可以将上述CSS规则简写成下面的形式。

上述两种写法效果相同。

11.2 逻辑组合伪类:is

伪类 :is() 是一个以多个选择器做为参数的函数,匹配由其参数表示的元素。

目前兼容性较差。

匹配伪类 hoverfocus 的元素并设置其颜色为红色。

11.3 逻辑组合伪类:not

负向逻辑组合伪类 :not() 是一个以多个选择器做为参数的函数,匹配不在其参数表中的元素。

目前兼容性较差。

匹配不包含 DISABLED 属性的 button 元素并设置其颜色为红色。

11.4 逻辑组合伪类:has

目前兼容性较差。

匹配包含 img 子元素的超链接并设置其边框为1象素红色。

12 组合选择器

12.1 后代选择器

匹配 h1 的后代的 em 元素并设置其颜色为红色。

查看示例程序

12.2 子元素选择器->

匹配 h1 的子元素 em 并设置其颜色为红色。

查看示例程序

12.3 相邻兄弟选择器-+

匹配 h1 的相邻兄弟元素 h2 并设置其颜色为红色。

查看示例程序

12.4 兄弟选择器-~

匹配 h1 的后面的同级结点 h2 并设置其颜色为红色。

查看示例程序

13 结尾

13.1 参考文献

W3C Working Draft : Selectors Level 4 - 21 November 2018

W3scool : CSS 选择器参考手册

菜鸟教程 :CSS 选择器

MDN : CSS Selectors

13.2 结语

本文是@毛瑞依据CSS选择器规范4择取的部分CSS选择器内容编写而成。因本人水平有限,理解和翻译时难免有偏差和错误,还请程序员朋友多多指正!

文中一些选择器兼容性还很差,只能做为学习储备,不适用于实际产品中运用。

费力原创十分不易,请大家转载时一定要明确注明出处来自【三十课】!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复