CSS学习之CSS Selectors

CSS Selectors

浏览器展示一个页面的过程：
1. 将HTML和CSS转换成DOM，DOM结合了内容和样式，即DOM就是HTML 和CSS结合的地方
2. 渲染render DOM树，展示

CSS的选择器主要分为四种：
1. 简单款
2. 属性款
3. 伪类和伪元素款
4. 组合款和多选择器款

Simplest Selectors##

主要是HTML elements ，id , class 以及万金油 *通配符

Attribute Selectors

属性选择器可以分成两种：
a. Presence and value attribute selectors
b. Substring value attribute selectors

Presence/value的就是准确适配的选择器
[attr]
[attr=val] 所有属性等于val的元素
[attr~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于”val”的E元素

Substring/value的就是形如正则式的模糊选择器
[attr|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以”val”开头的E元素，主要用于lang属性，比如”en”、”en-us”、”en-gb”等等
[attr^=val] 属性值以val字符开头
[attr$=val] 属性值以val字符结尾
[attr*=val] 属性值中有val字符

Pseudo-classes and pseudo-elements

Pseudo-classes : “:”表示，某种状态下的元素
pseudo-elements：”::”表示，元素的某个部分
详细：
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements

Combinators

组合款主要有四种
1. 后代选择器descendant selector，通过空格’ ‘实现，可以是子代，可以是孙代。i.e. element1 elemnen2 内嵌于1里面的2
2. 子代选择器child selector，通过右箭头 ‘>’ 实现，只能是子代 i.e. element1>element2
3. (兄)弟选择器 general sibling selector，通过’~’ 实现，所有同父节点在element1之后的element2， i.e. element1~element2 element1兄弟中的element2
4. 紧邻(兄)弟选择器 adjacent/next sibling selector ，通过’+’实现，element1后紧跟的element2

注意：兄弟选择器只能向后选择 不能向前选择

对于组合款选择器，重点都是在后面的元素element2，前面的element1和符号看作是选定条件。

Multiple## 多选择器款

由前三种任意组合，用逗号’,’分隔