CSS selector All In One

CSS selector All In One

CSS selector

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

https://drafts.csswg.org/selectors-4/

https://www.w3.org/TR/selectors-3/

https://www.w3.org/TR/CSS2/selector.html

https://www.w3.org/TR/CSS1/

特异性是浏览器确定哪些CSS属性值与某个元素最相关的方法，因此将被应用。特异性基于由不同种类的CSS选择器组成的匹配规则。

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

1. 基本选择器

通配选择器 *

标签/元素 选择器 div

属性选择器 [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

id 选择器 #id

class 选择器 .class

2. 分组选择器

A, B {
 /*css style*/
}

组合 选择器

后代组合器 div span (所有匹配)

直接孩子组合器 div > span

通用兄弟组合器 A ~ B (所有匹配)

直接相邻兄弟组合器 A + B

列组合器 A || B