CSS Selector

[PolluxLee]

# 基本选择器（Basic）

选择器	含义
*	匹配所有元素
Tag	匹配所有标签为 Tag 的元素
.className	匹配所有包含 className 的类名的元素
#idName	匹配 id 为 idName 的元素

# 组合选择器（Combine）

注：E 和 F 可以是标签，类名也可以是 ID

选择器	含义
E,F	逗号隔开表示或的关系，匹配所有E 或 F 的元素
E F	空格分隔，匹配 E 的所有后代包含 F 的元素
E>F	大于号分隔，匹配 E 的所有包含 F 的直接子元素
E+F	匹配 E 后面紧挨着的一个同级元素
E~F	匹配 E 后面所有同级元素

# 属性选择器（Attribute）

注：下面的 E 元素都可省略

选择器	含义
E[attr]	匹配所有具有属性 attr 的 E 元素
E[attr=val]	匹配所有具有属性 attr=value 的 E 元素
E[attr~=val]	匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素
E[attr \= val]	匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"val"开头的E元素，主要用于lang属性，比如"en"、"en-us"、"en-gb"等等
E[attr^="val"]	匹配所有属性 attr 值以 val 开头的 E 元素
E[attr$="val"]	匹配所有属性 attr 值以 val结尾的 E 元素
E[attr*="val"]	匹配所有属性 attr 值含有 val 的 E 元素

# 伪类（Pseudo Class）

选择器	含义
E:first-child	匹配父元素的第一个子元素
E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:active	匹配所有已被鼠标按下但未释放的 E 元素
E:hover	匹配所有鼠标悬停其上的 E 元素
E:focus	匹配所有获得焦点的 E 元素
E:lang(c)	匹配 lang 属性等于 c 的 E 元素
E:enabled	匹配表单中激活的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
E::selection	匹配用户当前选中的元素
E:root	匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty	匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素
E:target	匹配文档中特定"id"点击后的效果
E:not(s)	匹配不符合当前选择器的任何元素

# 伪元素（Pseudo Element）

选择器	含义
E::before	在E元素之前插入生成的内容
E::after	在E元素之前插入生成的内容
E::first-letter	匹配E元素的第一个字母
E::first-line	匹配E元素的第一行

# 选择器优先级

当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则

内联样式 > ID选择器 > (类选择器，属性选择器，伪类选择器) > (标签，伪元素)

通配选择符（universal selector）(*), 关系选择符（combinators） (+, >, ~, ' ') 和 否定伪类（negation pseudo-class）(:not()) 对优先级没有影响。（但是，在 :not() 内部声明的选择器是会影响优先级）

同权重的采用 就近原则 和 后声明覆盖 的原则

当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明

权重：

选择器	权值
内联样式	1000
ID 选择器	100
属性选择器、class 或者伪类	10
标签名、伪元素	1

测试：

 *                           ====> 0
 li                          ====> 1(一个元素)
 li:first-line               ====> 2(一个元素，一个伪元素)
 ul li                       ====> 2（两个元素）
 ul ol+li                    ====> 3（三个元素）
 h1+ *[rel=up]               ====> 11（一个属性选择器，一个元素）
 ul ol li.red                ====> 13（一个类，三个元素）
 li.red.level                ====> 21（两个类，一个元素）
 style=""                    ====> 1000(一个行内样式)
 p                           ====> 1（一个元素）
 div p                       ====> 2（两个元素）
 .sith                       ====> 10（一个类）
 div p.sith                  ====> 12（一个类，两个元素）
 #sith                       ====> 100（一个ID选择器）
 body #darkside .sith p      ====> 112(1+100+10+1,一个Id选择器，一个类，两个元素)

参考

https://www.w3cplus.com/css/css-specificity-things-you-should-know.html

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity