CSS 选择器

CSS 选择器是从右往左解析的，提高性能 // ？

HTML 中不能实现的结构（如后代元素），CSS不能实现。

ex：input[type="checkbox"]:checked + label::after {

content: "+";

}

常见的基于关系的选择器

E ~ F 匹配任何在E元素之后的同级F元素

| 命名空间选择器

^ 后代选择器，能穿越shadow边界::shadow // 改成 >> 了

^^ 会忽略所有shadow边界/deep/ ， // 改成 >>> 了

属性选择器通过已经存在的属性名或属性值匹配元素.

[attr]: 表示以 attr 命名的属性名的元素.
[attr=value]: 表示以 attr 命名的属性名,且该属性的值为"value"的元素.
[attr~=value]: 表示以 attr 命名的属性名,且该属性的值是一个以空格作为分隔的值列表,其中一个值为"value"的元素.; // css2.1 不匹配空格分隔的中文
[attr|=value]: 表示以 attr 命名的属性名,且该属性的值是一个以连字符作为分隔的值列表,其中一个值为"value"的元素.它可以作为语言子串匹配.; // css2.1 不匹配空格分隔的中文
[attr^=value]: 表示以 attr 命名的属性名,且该属性的值是以"value"开头的元素.
[attr$=value]: 表示以 attr 命名的属性名,且该属性的值是以"value"结尾的元素.
[attr*=value]: 表示以 attr 命名的属性名,且该属性的值中至少包含一个以"value"作为子串的元素.

[attr*=value i] 忽略大小写