选择器

@Selector

. 选择某个或某些元素以应用其定义的样式|规则

. 大多数选择器是向下选择，如后代；还可以平行选择，如兄弟 + ~；甚至可以向上选择，如 :has

. 更多信息，请访问 MDN - selector

标签选择器 Type selectors

. 也称元素选择器、类型选择器

. 使用元素标签名，如使用 div 表示选择<div>

. 可以选择多个元素

. 通常用来初始化标签属性

类选择器 Class selectors

. HTML中，使用 class 为元素添加类属性

. CSS中，使用点 . 表示，如 .box

. 元素可以同时使用多个类/层叠，最后的样式由多个类共同作用

. 应用最为广泛

. 容器类通常命名为：container、wrap、wrapper、box、card等

<div class = "box"></div>

.box{}

ID选择器 ID selectors

. HTML中，使用 id 为元素添加 ID 属性

. CSS中，使用点 # 表示，如 #box

. ID属性用来唯一标识一个元素

. 一般供 JavaScript 操作元素使用

<div id = "box"></div>

#box{}

类 class 和 ID 请使用语义化的变量命名

*通配符选择器 Universal selectors

. 以 * 表示，代表所有元素

. 多用于样式初始化

. 渲染性能上略有不足；生产环境中不建议使用，尽量初始化具体的元素

. 优先级最低

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

优先级

. 不同的选择器，对应的优先级也不尽相同

. 选择器的优先级会决定样式是否应用到元素：优先级高，选中元素，将应用/覆盖元素样式；优先级低，选不中元素，样式不应用/不覆盖，保持原来样式

. 样式不生效，一定要检查选择器的优先级，特别是选择器组合使用的时候

. 单个选择器比较容易；组合选择器最终的优先级要综合计算不同选择器的权值对应的十进制

. 可以使用 !important 提升优先级为最高，谨慎使用；某些框架开发中，为了覆盖样式，会使用样式穿刺技术提示优先级

div {
    color: #f40 !important;
}

Tips

如非必要，尽量使用更加直观的方式应用类；避免炫技