CSS 选择器规定了 CSS 规则可以应用在哪些元素上。
CSS 选择器分类
选择器从大的分类上可以划分为以下几种：基本选择器、分组选择器、组合器、伪选择器。
基本选择器
- 通用选择器：
*,selector *，用于匹配所有元素或者 selector 选择器下的所有元素 - 元素选择器：
elementname, 按标签名匹配所有符合条件的元素 - 类选择器：
.classname, 根据class属性匹配所有符合条件的元素，class可以有多个值，不同值之间用空格分隔 - ID 选择器：
#idname, 根据 id 属性匹配所有符合条件的元素 - 属性选择器：
[attr],[attr=value],[attr~=value],[attr|=value],[attr^=value],[attr$=value],[attr*=value]，例如：[type="text"]用于选择所有拥有type="text"属性的 input 元素
属性选择器规则释义：
^字符串开始位置匹配
$字符串结束位置匹配
*字符串任意位置匹配
i字符串匹配不区分大小写
g字符串全局匹配
[attr~=value]attr 的值需要包含单词 value，注意是单词，而不是字符串里有这个字符
[attr|=value]开头必须是 value 的单词
分组选择器
指用 , 分隔形成的选择器列表，只要满足列表中任一条件即可被匹配到，例如：
.title,
.meta-item,
.author-name {
color: #333;
}
组合器
指将多个选择器组合在一起使用，从而缩小匹配的范围。
- 后代选择器: 例如
.main .article - 直接子代选择器: 例如
ul > li - 一般兄弟选择器: 例如
.prev ~ .next, 匹配同一个父级下，.prev后的所有.next元素 - 紧邻兄弟选择器: 例如
h2 + p, 匹配所有紧邻在h2后的p元素 - 列组合器: 用于表格，例如
col || td会匹配所有col作用域内的td元素
伪选择器
分为伪类选择器和伪元素选择器。
- 伪类选择器：根据元素的状态信息选择元素，例如
a:hover用于匹配a元素的鼠标滑过状态 - 伪元素选择器：用于表示 HTML 语义无法表达的元素，例如：
p:first-letter用于匹配所有p元素的首个字符
CSS 选择器权重
一般来说，选择器越特殊优先级就越高，指向就越精确，通常会这样划分：
1表示元素选择器的优先级10表示类选择器的优先级100表示 ID 选择器的优先级
那么计算优先级时就可以按照如下方法计算：
.main h2 优先级：10 + 1 = 11
.main article .title 优先级：10 + 1 + 10 = 21
#hot-news .title 优先级：100 + 10 = 110
CSS 选择器使用注意事项
- 避免选择器名称过于通用，匹配过多的元素
- 避免嵌套过深
- 采取防冲突措施，例如使用 BEM 方式命名、使用 CSS modules
- ID 选择器前不要再加其它选择器限制，因为它本身已经唯一了
- 尽量避免使用
!important
