CSS基础概念之选择器类型

CSS选择器类型

选择器表示元素在树结构中的特定模式。选择器(selector)术语指的是，简单选择器(simple selector)，复合选择器(compound selector)，复杂选择器(complex selector)，或者选择器列表(selector list)。选择器的主题是任何被选择器被定义的元素；即与该选择器匹配的任何元素。

简单选择器是元素上的一个条件。 类型选择器(class-selector)，通用选择器(universal-selector)，属性选择器(attribute-selector)，类选择器(type-selector)，ID选择器(id-selector)，或者伪类(pseudo-class)都是简单选择器。当本说明书中定义的简单选择器根据文档语言准确地描述了给定元素时，该给定元素被称为与该简单选择器匹配。

复合选择器是一个没有被组合子分割的简单选择器组成的序列，表示一组条件同时选择一个元素。如果符合选择器包含类型选择器或通用选择器，这个选择器必须在序列中第一个出现。在序列中只允许出现一个类型选择器或通用选择器。当元素符合复合选择器中的所有简单选择器则该元素才匹配了这个复合选择器。

注意：空白字符表示后端组合子，在复合选择器中，简单选择器之间不允许有空格。

伪复合选择器是伪类选择器，之后可选的可以跟一个伪类选择器，之前可选的可以加一个复合选择器或者伪复合选择器，但不能有任何组合子。当伪元素具有指定的伪元素名称，与任何伪类所表示的额外条件匹配，并具有由相邻的前一个选择器表示的起源元素时，伪元素与伪复合选择器匹配。如果没有相邻的前一个选择器，则假定为通用选择器。（例如，.foo ::before 等同于 .foo *::before，并且与 .foo::before 不同。）

例如，在.foo::before:hover中，.foo是复合选择器，而::before:hover是伪复合选择器。然而在.foo::before::marker中，::before和::marker是独立的伪复合选择器.

注意：伪复合选择器不是复合选择器，不能使用在明确说明只能使用复合选择器的地方。伪复合选择器的作用就好像它们自己携带了一个组合子，表达了它们与原始元素的关系，就像>组合子表达了与父元素的关系一样。

组合子描述的是两个元素之间的关系，这两个元素由组合子两边的复合选择器提供。在4级选择器中组合子包括：后代组合子（空格），子组合子（U+003E, >），下一个兄弟组合子（U+002B, +），后继同级组合子（U+007E, ~）。两个给定元素之间的相关关系是真则表示这两个元素匹配了这个组合子。

复杂选择器是一个序列，这个序列由组合子分割的复合选择器或伪复合选择器或者复合选择器和伪复合选择器组成。复杂选择器是作用于一组元素上的一组条件，这组条件通过组合子描述特定关系。当一个元素或伪元素匹配中了序列中最后的复合/伪复合选择器，并且序列中通过组合子分割的其他选择器单元也匹配中了各自的元素，那么就可以说这个元素匹配中了复杂选择器。

例如，.foo.bar匹配一个有"foo"和"bar"类的元素。
'.ancestor > .foo.bar’匹配这些元素的子集: 这些元素的父元素有"ancestor"类。
'.foo.bar::before’匹配一个微元素，它的源元素是.foo.bar。

简单/复合/复杂选择器列表是一个逗号分割的简单，复合，复杂选择器列表。当类型不重要或在附近的文中指定时，也被称为选择器列表，如果了下很重要并且没有被指定是，默认是复杂选择器列表。

翻译自：https://drafts.csswg.org/selectors-4/#structure

对规范的理解

复合选择器

以上规范中复合选择器比较存疑，因为规范中说的是选择器列表，但是以逗号分割的，或者空格分割的都是列表，所以这里具体说明一下复合选择器。
在规范中也说了复合选择的作用是通过一组条件选择同一个元素，并且其中不能有组合子。所以复合选择器是div.abc这种形式，并且也明确说了如果有类型选择器或者通用选择器那么只能出现在复合选择器的开头。因为像div.abc这种形式，如果将div放在.abc后面又没有组合子分割，那么其表达的含义和我们的目的显然相去甚远，.abcdiv表示的是选择一个类名为abcdiv的元素，而不是一个有abc类的div元素。

伪复合选择器

伪复合选择器，我理解是伪元素的复合选择器。复合选择器是通过元素自身属性的更加精确的描述来选择元素。而伪复合选择器则是通过伪元素自身属性更加精确的描述来选择伪元素。例如：div.abc说的是有一个div元素它还必须有abc类名。::before:hover说的是伪元素before必须被hover中才会被选中。所以复合选择器的作用都是细化自身属性来选择某个元素。

复杂选择器

和复合选择器通过细化自身属性来选择元素不同，复杂选择器是通过元素和元素之间的关系来选择元素，而关系的表述是通过组合子完成的，分别是white space用于选择后代，>用于选择子代，+用于选择下一个兄弟节点，~用于选择后继同级兄弟节点。例如：div .abc选择的是div的后代具有abc类的元素。