CSS 选择器

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

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

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

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

content: "+"%3B

}

常见的基于关系的选择器

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

|          命名空间选择器

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

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

https://stackoverflow.com/a/42135065/7167456

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

[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]  忽略大小写