什么是属性的计算过程

一个标签，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值的计算过程；

属性的计算过程

  1. 确定声明值：参考样式表中没有冲突的声明，作为 CSS 属性值；

  2. 层叠冲突：对样式表有冲突的声明使用层叠规则，确定 CSS 属性值；

    1. 比较重要性（用户的比浏览器的样式重要）；
    2. 比较权重；

  3. 使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值；

  4. 使用默认值：对仍然没有值的属性，使用默认值；

确定声明值

层叠冲突

使用继承

使用默认值

层叠规则

  1. CSS 是 Cascading Style Sheets 的缩写，这暗示层叠（cascade）的概念是很重要的；

  2. 在最基本的层面上，它表明 CSS 规则的顺序很重要，但它比那更复杂；

  3. 什么 选择器 在层叠中胜出 取决于 三个因素（这些都是按重量级顺序排列的，前面的一种会否决后一种）：

    1. 重要性（Importance）
    2. 专用性（Specificity）
    3. 源代码次序（Source order）

重要性

  1. 在 CSS 中，有一个特别的语法可以让一条规则总是优先于其他规则 !important；

  2. 建议要使用它，除非必须使用它；不得不使用它的一种情况是，当你在修改某个组件样式时，不能编辑该组件核心的 CSS 模块，又或者确实想要重写一种不能以其他方式覆盖的样式；

  3. 但如果能避免的话，不要使用它；由于 !important 改变了层叠正常工作的方式，因此调试 CSS 问题，尤其是在大型样式表中，会变得非常困难；

专用性

  1. 专用性基本上是衡量选择器的具体程度的一种方法，主要是指它能匹配多少元素；

    • 元素选择器 具有很低的专用性；
    • 类选择器 具有更高的专用性，所以将战胜元素选择器；
    • ID 选择器 有甚至更高的专用性, 所以将战胜类选择器，战胜 ID 选择器 的方法则是 style 中的样式或者 !important；

  2. 一个选择器具有的专用性的量可以用四种不同的值（或组件）来衡量的，它们可以被认为是 千位、百位、十位 和 个位 ，在四个列中的四个简单数字：

    • 千位：如果声明是在 style 属性中该列加 1 分（这样的声明没有选择器，所以它们的专用性总是 1000）否则为 0；
    • 百位：在整个选择器中每包含一个 ID 选择器 就在该列中加 1 分；
    • 十位：在整个选择器中每包含一个 类选择器、属性选择器、或者伪类 就在该列中加 1 分；
    • 个位：在整个选择器中每包含一个 元素选择器 或 伪元素 就在该列中加 1 分；

  3. 注：通用选择器 (*)、复合选择器（+、>、~、空格）和否定伪类（:not）在专用性中无影响；

  4. 举个例子：

    选择器 千位 百位 十位 个位 合计值
    h1 0 0 0 1 0001
    #indentifier 0 1 0 0 0100
    h1 + p::first-letter 0 0 0 3 0003
    li > a[href*=”zh-CN“] > .inline-warning 0 0 2 2 0022
    没有选择器，规则在一个元素的 style 属性里 1 0 0 0 1000

源代码次序

  1. 如果多个相互竞争的选择器具有相同的重要性和专用性，那么第三个因素将帮助决定哪一个规则获胜，也就是说，选择哪一个选择器取决于源码顺序，例如：

    p {
    color: red;
}

p {
    color: blue;
}

  2. 不过有一点需要注意的是，当多个 CSS 规则匹配相同的元素时，它们都被应用到该元素中；只不过后面因为层叠规则被层叠掉了而已；

继承规则

什么是继承

  1. 所谓继承，就是应用于某个元素的一些属性值将由该元素的子元素继承，而有些则不会；

  2. CSS 为处理继承提供了四种特殊的通用属性值：

    • inherit：继承父元素的值；
    • initial：使用浏览器的默认值；如果浏览器默认样式表中没有设置值，那么该属性值就被设置为 inherit ，不被 IE 支持；
    • unset：属性的值继承 inherit ，若 inherit 没有继承到值则继承 initial ，不被 IE 支持。
    • revert：属性值被设置成自定义样式所定义的属性（如果被设置）， 否则属性值被设置成用户代理的默认样式；

继承的就近原则

  1. 由于属性值是由继承而来，所以属性值会继承离自己近的那个元素的属性，例如：

    html
    css
    <div class="one">
  <div class="two">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

    .two {
  color: blue;
}

.one {
  color: red;
}

  2. 在上面的示例中 two 比 one 更加接近 p ，所以最终采用的是 two 的 color 值，段落呈现蓝色；

面试题

浏览器如何解析 css 选择器？

  1. 浏览器读取到选择器时，会从 DOM 树中找到匹配的对应节点，然后将样式附着到对应的 DOM 元素上；

  2. 当选择器出现多个层级时，浏览器会使用 从右到左 的顺序进行匹配，对应到 DOM 树的遍历上，是从叶子到根的方向进行筛选，这样可以提升匹配效率；

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 什么是属性的计算过程
  2. 2. 属性的计算过程
    1. 2.1. 确定声明值
    2. 2.2. 层叠冲突
    3. 2.3. 使用继承
    4. 2.4. 使用默认值
  3. 3. 层叠规则
    1. 3.1. 重要性
    2. 3.2. 专用性
    3. 3.3. 源代码次序
  4. 4. 继承规则
    1. 4.1. 什么是继承
    2. 4.2. 继承的就近原则
  5. 5. 面试题
    1. 5.1. 浏览器如何解析 css 选择器？