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 🧪

伪选择器

伪元素 选择器 a:visited
伪类 选择器 p::first-line

refs

css tricks

https://css-tricks.com/almanac/properties/u/user-select/

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---