这是我参与「第四届青训营 」笔记创作活动的的第1天
CSS选择器是什么？
CSS作为前端三件套：JavaScript(行为)、CSS(样式)、HTML(内容)之一。CSS 全称 Cascading Style Sheets，作用是用来定义页面元素的样式，其中包括字体、颜色、位置、大小和动画效果等。而选择器Selector就是选取设置样式的元素的模式，而CSS选择器的解析顺序也就影响着CSS所展现的效果。
CSS选择器解析顺序
CSS选择器是从右往左解析的，为什么呢？ 因为HTML会接触DOM Tree的同时样式脚本则解析出 style rules，也就是 CSS tree。最后，两者一起解析出 Render Tree，因此 Render Tree就会包含 Dom 对象及其样式。 DOM 对象所对应的样式是通过遍历 style rules来进行匹配，在 DOM 树中一个元素可能有若干子元素，而一个子元素只有一个父元素，从而有效提高性能。
假如结构如下，以 .a .b .c #d 为例：
- 从左往右解析时会发现从上到下遍历搜索会出现很多次回溯，才能匹配成功。
- 而从右往左解析时，简单来说就是先找到叶子结点，再往上寻找就保证会有其父亲节点
CSS选择器类别
| 标题 | 例子 | 权重 |
|---|---|---|
| 通配 | * {} | |
| 标签 | h1 {} / p {} | 一级 |
| id | #logo {} | 三级 |
| class | .done {} | 二级 |
| 属性 | [disabled] {} | 二级 |
| 伪类 | 根据元素的不同，有不同的伪类 | 二级 |
CSS还存在不同的组合形式，如果元素没有定义CSS样式，就会自动继承父元素的样式
id 和 class 的区别在于前者是不可重复使用的，而后者可以多个标签同时使用。
由于我们知道CSS解析就像是进行树搜索一样，因此良好的CSS习惯是避免深层次的节点，如
div > div > p，而在已经有id或class的情况下无需再指定父元素，如p#id1
-
通配符、子选择器、相邻选择器等的。如: *、>、+等为0级
-
内联样式权值为四级
-
继承的样式没有权值，通配选择器定义的规则优先级高于元素继承过来的规则的优先级。
CSS 优先级规则
!important无条件最高优先级，五级- 权值不同时，权值高的选择器优先
- 权值相同时，后定义的选择器规则优先
以上就是一些有关CSS选择器解析和权重的简单概述，希望有助于大家更规范使用CSS，不但可以提高可读性，也可以提高性能！
引用参考：
