CSS4教程-规范 – sky8g网站-免费提供IT技术资料，开始你的IT生涯！

CSS4选择器

由W3C制作草案，于2018年11月21发布

版本：

https://www.w3.org/TR/2018/WD-selectors-4-20181121/

抽象

选择器是针对于DOM树中元素的一种匹配模式，因此形成可用于选择文档中的若干个节点技术之一。选择器针对HTML和XML进行了优化，主要用于性能关键代码。它们是CSS（层叠样式表）【Cascading Style Sheets】的核心组件，它使用选择器将样式属性绑定到文档中的元素。CSS4选择器描述了[SELECT]中已存在的选择器，并进一步介绍了CSS和其他可能需要它们的语言的新选择器。

CSS是一种用于描述屏幕，文件等结构化文档（如HTML和XML）的呈现的语言。

文档标准

本节介绍本文档标准。其他文件可能会取代本文件。可以在W3C技术报告索引（https://www.w3.org/TR/）中找到当前W3C出版物和本技术报告的最新版本。

作为工作草案发布并不意味着W3C会员资格的认可。这是一份草案文件，可能随时被其他文件更新，替换或废弃。除了正在进行的工作之外，引用此文档是不恰当的。

GitHub问题是讨论本规范的首选。提交问题时，请在标题中加入“选择者”字样，最好是这样：“[选择者] ……评论摘要…… ”。所有问题和评论都已存档，还有一个历史存档。

本文档由CSS工作组（Style Activity的一部分）制作。

本文档由一个根据W3C专利政策运营的小组制作。W3C维护一份与该集团可交付成果有关的任何专利披露的公开名单 ; 该页面还包括披露专利的说明。具有个人认为包含基本要求的专利的实际知识的个人必须根据W3C专利政策的第6节披露该信息。

本文档受2018年2月1日W3C流程文档的约束。

以下功能存在风险，可能会在CR期间被删除：

列选择符
:drop() 伪类（pseudo-class）
:read-write 伪类 pseudo-class

“有风险”是W3C流程的术语，并不一定意味着该功能有被丢弃或延迟的危险。这意味着工作组认为该功能可能难以及时互操作地实施，并且将其标记为允许工作组在转换到建议的Rec阶段时根据需要丢弃该功能，而无需在没有发布新的候选Rec的情况下该功能首先。

1.介绍

本节不是规范性的。

选择器是一个布尔词接受一个元件中的树结构和测试元件是否选择匹配或不。

这些表达式可用于很多事情：

直接在元素上测试它是否与某些条件匹配，例如element.matches()在[DOM]中定义的函数中
应用于整个元素树，将其过滤为一组符合条件的元素，例如[DOM]中document.querySelectorAll()定义的函数或CSS样式规则的选择器。
使用”反向”来生成与给定选择器匹配的标记，例如在HAML或Emmet中。

选择器级别1,2和3分别定义为CSS1，CSS2.1和CSS3规范中定义的选择器功能的子集。该模块定义了CSS4选择器。

1.1 模块交互

该模块替换了[SELECT]和[CSS21]中为CSS定义的选择器集的定义和扩展。

在渲染树中定义抽象元素的伪元素选择器不是此规范的一部分：这里描述了它们的通用语法，但由于它们与渲染模型的紧密集成以及与DOM查询等其他用途无关，它们将在其他模块中定义。

2. 选择器概述

本节是非规范性的，因为它仅概述了以下部分。

选择器表示结构。该结构可以用作条件（例如，在CSS规则中），其确定选择器在文档树中匹配哪些元素，或者作为对应于该结构的HTML或XML片段的平面描述。

选择器的范围可以从简单的元素名称到丰富的上下文表示。

下表总结了Selector语法：

图案	代表	部分	水平
*	任何元素	§5.2通用选择器	2
E	E类元素	§5.1类型（标签名称）选择器	1
E:not( s1 , s2 , …)	与复合选择器 s1或复合选择器 s2不匹配的E元素	§4.3否定(不匹配)伪类::not()	3/4
E:is( s1 , s2 , …)	与复合选择器 s1或复合选择器 s2匹配的E元素	§4.2匹配-任何伪类::is()	4
E:where( s1 , s2 , …)	与复合选择器 s1或复合选择器 s2匹配的E元素，但没有特异性。	§4.4特异性调整伪类:: where()	4
E:has( rs1 , rs2 , …)	匹配含有rs1获取rs2的选择器器	§4.5关系伪类:: has()	4
E.warning	属于该类的E元素 warning （文档语言指定如何确定类）。	§6.6类选择器	1
E#myid	ID等于的E元素 myid 。	§6.7ID选择器	1
E[foo]	带有 foo 属性的E元素	§6属性选择器	2
E[foo="bar"]	一个E元素，其 foo 属性值完全等于 bar	§6属性选择器	2
E[foo="bar" i]	一个E元素，其 foo 属性值完全等于bar,但是不区分大小写。其中i表示不区分大小写。	§6.3不区分大小写	4
E[foo="bar" s]	一个E元素，其 foo 属性值精确且区分大小写等于 bar	§6.3区分大小写	4
E[foo~="bar"]	一个E元素，其 foo 属性值是以空格分隔的值的列表，其中一个值恰好等于 bar	§6属性选择器	2
E[foo^="bar"]	一个E元素，其 foo 属性值与字符串完全一致 bar	§6.2子串匹配属性选择器	3
E[foo$="bar"]	一个E元素，其 foo 属性值与字符串完全结束 bar	§6.2子串匹配属性选择器	3
E[foo*="bar"]	一个E元素，其 foo 属性值包含子字符串 bar	§6.2子串匹配属性选择器	3
E[foo\|="en"]	一个E元素，其 foo 属性值是以连字符分隔的值列表，以。开头 en	§6属性选择器	2
E:dir(ltr)	E类型的元素，具有从左到右的方向性（文档语言指定如何确定方向性）	§7.1方向性伪类:: dir（）	4
E:lang(zh, "*-hant")	E类型的元素，用中文（任何方言或书写系统）标记或以其他方式用繁体中文字符书写	§7.2语言伪类:: lang（）	3/4
E:any-link	E元素是超链接的源锚点	§8.1超链接伪类::任意链接	4
E:link	E元素是尚未访问目标的超链接的源锚点	§8.2链接历史伪类:: link和：visited	1
E:visited	E元素是已经访问过目标的超链接的源锚点	§8.2链接历史伪类:: link和：visited	1
E:local-link	E元素是指向当前URL的超链接的源锚点	§8.3本地链接伪类:: local-link	4
E:target	E元素是当前URL的目标	§8.4目标伪类::目标	3
E:target-within	一个E元素，它是当前URL的目标或包含一个元素。	§8.5目标容器伪类:: target-within	4
E:scope	E元素是指定的引用元素	§8.6参考元素伪类::范围	4
E:current	当前在时间画布中呈现的E元素	§10时间维度伪类	4
E:current( s )	一个E元素，它是与参数 s匹配的最深：当前元素	§10时间维度伪类	4
E:past	过去在时间画布中的E元素	§10时间维度伪类	4
E:future	未来时间画布中的E元素	§10时间维度伪类	4
E:active	处于激活状态的E元素	§9用户操作伪类	1
E:hover	光标下的E元素，或光标下的后代	§9用户操作伪类	2
E:focus	具有用户输入焦点的E元素	§9用户操作伪类	2
E:focus-within	具有用户输入焦点或包含具有输入焦点的元素的E元素。	§9.5焦点容器伪类::焦点内部	4
E:focus-visible	具有用户输入焦点的E元素，并且UA已确定应该为该元素绘制焦点环或其他指示符	§9用户操作伪类	4
E:enabled	启用用户界面元素E.	§12.1.1：启用和：禁用伪类	3
E:disabled	禁用的用户界面元素E.	§12.1.1：启用和：禁用伪类	3
E:read-write	用户界面元素E，它是用户可更改的	§12.1.2可变性伪类::只读和：读写	3-UI / 4
E:read-only	用户界面元素E，它是用户可是不可更改的	§12.1.2可变性伪类::只读和：读写	3-UI / 4
E:placeholder-shown	当前显示占位符文本的输入控件	§12.1.2可变性伪类::只读和：读写	3-UI / 4
E:default	用户界面元素E，它是一组相关选项中的默认项	§12.1.4默认选项Pseudo-class :: default	3-UI / 4
E:checked	检查/选择的用户界面元素E（例如单选按钮或复选框）	§12.2.1Selected-option Pseudo-class :: checked	3
E:indeterminate	处于不确定状态的用户界面元素E（既未选中也未取消选中）	§12.2.2不确定值伪类::不确定	4
E:valid	符合其数据有效性语义的用户输入元素E.	§12.3.3范围伪类::范围内和：范围外	3-UI / 4
E:invalid	不符合其数据有效性语义的用户输入元素E.	§12.3.3范围伪类::范围内和：范围外	3-UI / 4
E:in-range	用户输入元素E，其值在范围内/超出范围	§12.3.3范围伪类::范围内和：范围外	3-UI / 4
E:out-of-range	用户输入元素E，其值在范围内/超出范围	§12.3.3范围伪类::范围内和：范围外	3-UI / 4
E:required	需要/不需要输入的用户输入元素E.	§12.3.4选项性伪类:: required和：optional	3-UI / 4
E:optional	需要/不需要输入的用户输入元素E.	§12.3.4选项性伪类:: required和：optional	3-UI / 4
E:blank	用户输入元素E，其值为空（空/缺失）	§12.3.1空值伪类::空白	4
E:user-invalid	用户更改的用户输入元素E输入错误（无效，超出范围，省略但必须）	§12.3.5用户交互Pseudo-class :: user-invalid	4
E:root	一个E元素，文档的根	§13树结构伪类	3
E:empty	除了空格之外没有子元素（既不是元素也不是文本）的E元素	§13树结构伪类	3
E:nth-child( n [of S ]?)	E元素，其父元素的第 n 个子元素与 S 匹配	§13.3儿童索引的伪类	3/4
E:nth-last-child( n [of S ]?)	一个E元素，它的父级匹配 S的第 n 个子元素，从最后一个元素开始计数	§13.3儿童索引的伪类	3/4
E:first-child	E元素，其父元素的第一个子元素	§13.3儿童索引的伪类	2
E:last-child	E元素，其父元素的最后一个子元素	§13.3儿童索引的伪类	3
E:only-child	一个E元素，只是其父元素的子元素	§13.3儿童索引的伪类	3
E:nth-of-type( n )	一个E元素，它的类型的第 n 个兄弟	§13.4类型化子索引伪类	3
E:nth-last-of-type( n )	一个E元素，它的类型的第 n 个兄弟，从最后一个开始计算	§13.4类型化子索引伪类	3
E:first-of-type	一个E元素，它的类型的第一个兄弟	§13.4类型化子索引伪类	3
E:last-of-type	一个E元素，它的类型的最后一个兄弟	§13.4类型化子索引伪类	3
E:only-of-type	一个E元素，只有它的类型的兄弟	§13.4类型化子索引伪类	3
E F	E元素的F元素后代	§14.1后代组合子（）	1
E > F	E元素的F元素子元素	§14.2儿童组合子（>）	2
E + F	紧接在E元素之前的F元素	§14.3下一个兄弟组合子（+）	2
E ~ F	一个前面有E元素的F元素	§14.4后续兄弟组合子（〜）	3
F \|\| E	表示属于由元素F表示的列的网格/表中的单元格的E元素	§15网格结构选择器	4
E:nth-col( n )	一个E元素，表示属于网格/表中第 n 列的单元格	§15网格结构选择器	4
E:nth-last-col( n )	一个E元素，表示属于网格/表中第 n 列的单元格，从最后一列开始计算	§15网格结构选择器	4

如果喜欢本篇文章请关注我们！

如果有不懂的地方请留言，SKY8G网站编辑者专注于研究IT源代码研究与开发。希望你下次光临，你的认可和留言是对我们最大的支持，谢谢！