CSS 选择器 与 CSS 特异性,继承,层叠

CSS 选择器 与 CSS 特异性,继承,层叠

CSS 选择器是 CSS 的基础知识,
它能够给浏览器声明样式应该作用于哪些元素;

而元素具体要使用哪些样式, 就离不开 CSS 的三个特性:

• 特异性 Specificity 也可以翻译成优先级
• 继承 Inheritance
• 层叠 Cascade

本文通过三个问题讲述上面的知识

• 如何给特定的元素加上样式, 讲述 CSS 选择器的使用以及 CSS 的特异性
• 元素是如何继承样式的, 讲述 CSS 的继承
• 多个样式作用到同一个元素使用哪个, 讲述 CSS 的层叠

如何给特定的元素加上样式

想要给特定元素加上样式, 就需要利用 CSS 选择器让浏览器知道, 样式要作用于哪个元素.

那么, CSS 选择器有哪些呢?

推荐大家去浏览 MDN CSS_Selectors
这里为了大家阅读方便, 我就简单罗列了一下

• 基本选择器
  • 通用选择器(universal selector), 符号是 *, 选择所有元素。
    • 不推荐使用, 有可以会造成继承的失效, 并且效率低
  • 元素选择器(type selector), 例如 p 标签;
  • 类选择器(class selector), 按照给定的 class 属性的值，选择所有匹配的元素。
  • ID 选择器(ID selector), 按照 id 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。
  • 属性选择器(attribute selector) 属性选择器, 根据不同的属性来匹配所有的元素, 详情见Attribute_selectors
• 分组选择器
  • 选择器列表(Selector list): 符号是 , 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。
• 组合器
  • 后代组合器(descendant combinator) 符号是 (空格), 组合器选择前一个元素的后代节点。
  • 直接子代组合器(Child combinator), 符号是>, 选择前一个元素的直接子代的节点.
  • 一般兄弟组合器(General sibling combinator), 符号是~,后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。
  • 紧邻兄弟组合器(Adjacent sibling combinator), 符号+,即后一个元素紧跟在前一个之后，并且共享同一个父节点。
• 伪选择器
  • 伪类 伪类选择器是非常多的, 例如 :nth-child(), :link 等有几十种
    • :nth-child() 是一个非常灵活的伪类选择器, 可以输入 2n + 1 这种表达式, 也可以输入 even odd关键字
  • 伪元素 例如 ::before
    • 特别注意 伪元素前面应该写两个 : 符号; 如果写一个 :符号, 浏览器也会识别, 但是并不推荐!

如果多个选择器合在一起写, 且没有空格隔开, 则表示要同时满足;
例如: a#go_web 则表示需要满足以下 2 个条件

• 元素是 a 标签
• 元素的 id 是 go_web

浏览器允许多个重复的 id 存在, 且 id 选择器的 css 样式会这些重复 id 的元素都起作用; 但是, 不推荐这么做;

---

CSS 选择器会附带特异性, 根据特异性的不同, 会有不同的权重;
从而, 在有样式冲突时, 让浏览器去决定选择使用哪一个样式;

CSS 的特异性可以分为 0,0,0,0 四个权限段;

按照从左到右的顺序依次比较, 只有当前面的权限段相等才会继续比较;
例如 1,0,0,0 是 大于 0,99,99,99 的

下面会结合例子, 帮助大家理解;

• 行内样式, 1,0,0,0
• 每一个 ID 选择器. 添加 0,1,0,0
• 每个类选择器, 属性选择器, 伪类选择器, 添加 0,0,1,0
• 每个元素选择器, 伪元素选择器, 添加 0,0,0,1
• 通用选择器, 添加 0,0,0,0 (注意: 0,0,0,0 也是有意义的!)
• 组合器, 不添加任何特异性

!important 针对某一个一个属性, 且建议 非必要不使用;

<!-- specificity 1,0,0,0 -->
<span style="color: red;">hello world</span>

h1 {
   
  color: red;
} /* specificity = 0,0,0,1   h1标签 */
p em {
   
  color: purple;
} /* specificity = 0,0,0,2   注意组合器是不会添加权重的 */
.grape {
   
  color: purple;
} /* specificity = 0,0,1,0 */<