- 标签 选择器
标签名 { 属性名 : 属性值 ; 属性名 : 属性值 ; ... }
标签选择器的优势: 可以 批量化地 修改 某些页面元素的 样式 特征
劣势: 不够灵活 , 如果 只希望 修改 当前页面的 某 几个 元素 , 其他 几个元素的样式 则不希望被 影响
同一种标签的 元素 使用 标签选择器 只能 全部 同步 变更 样式 , 不能 部分 变更 - 类选择器
.class值{ 样式属性名: 属性值 ; ... }
需要 在 元素 中 添加 class 属性, 自定义 class 属性值 , 拥有 相同 class 属性值的 页面元素 属于同一类/组
通过 类选择器 对 该 组元素 同一加样式 , 为了 与标签选择器 做 区分, 方便 浏览器 解析识别 , 类选择器 前需要
优势 : 批量化 修改 某一组 元素的 样式 组的划分 可以 自由 定义, 自由组合 相对于 标签选择器, 更加灵活
-
ID选择器
需要 在 页面元素 中 添加 id 属性设置 , 自定义 id 属性的 值
#id属性值{ css属性名:属性值; ... }
其中 # 方便 浏览器 将其 与 标签选择 , 类选择器 做 区分
优点: 可以非常灵活 , 精准 地 匹配定位到 某一个 页面元素
缺点: 页面元素的 ID 值 不能 重复 , 因此 一个ID选择器只能应用于一个页面元素 , 不能批量化设置样式
CSS 样式 可能会出现 多个选择器 匹配 到同一个元素, 该元素 会呈现 多个选择器 样式属性的 叠加 效果
多个 选择器样式叠加时, 如果 css属性设置不同 , 则 将 多个 css属性 叠加到一起应用于 目标页面元素
如果 连个 选择器中 对同一个 css属性 做了 不同的 设置 , 则根据优先级 进行 比对 , 优先级 高的 有效
如果 优先级 也相同 , 根据 顺序, 后 叠加的 样式属性 有效