CSS 基础 - Cascade and Inheritance

CSS 基础 - Cascade and Inheritance

MDN学习笔记：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

CSS是开放网络的核心语言之一，由W3C规范实现跨浏览器的标准化。CSS被分为不同等级：CSS1现已废弃，CSS2.1是推荐标准，CSS3分成多个小模块且正在标准化中。

学习目标

掌握三个基础概念：层叠 cascade、优先级 specificity、继承 inheritance。

层叠 cascade

多个样式应用于同一个元素的时候，层叠的规则决定了发生冲突时应该使用哪条样式。其中有个非常重要的概念就是优先级。

了解层叠的规则需要考虑三个因素（重要程度由高到低）：

1. 重要程度
2. 优先级
3. 资源顺序

资源顺序

样式层叠最基本的规则：简单地说就是相同级别(优先级)的规则应用到同一个元素时，实际使用的是最后面的规则。

<style>
    h1 {
        color: red;
    }
h2 {
    color: blue;
}


</style>

<h1>I'm blue.</h1>

优先级

当有多个规则同时应用于一个元素时，“范围更小”的规则优先级更高。

<style>
    /* 优先级：id > class > elemet */
    #orange {
        color: orange
    }
.class-blue {
    color: blue;
}

h1 {
    color: yellow;
}


</style>

<h1 id="orange" class="class-blue">hello, orange.</h1>

<h1 class="class-blue">hello, blue.</h1>

如何计算优先级

使用选择器定义样式的时候，不同的选择器会有不同的优先级。如何计算优先级（优先级由高到低）：

1. 在 style 中声明的内联样式。

2. 外联样式，选择器

   level 1. ID选择器

   level 2. 类选择器、属性选择器、伪类选择器

   level 3. 元素选择器、伪元素选择器

   通配符(*)，组合符(+, >, ~, '')，和否定伪类(:not)不参与优先级计算

优先级	选择器	level 1 | 2 | 3	描述
1	<h1 style="color: blue">		内联样式
2	#identifier { color: blue }	1 | 0 | 0	ID选择器
3	li > a[href*="en-US"] > .inline-warning { color: blue }	0 | 2 | 2	属性选择器，类选择器，元素选择器*2
4	h1 + p::first-letter { color: blue }	0 | 0 | 3	元素选择器*2，伪元素选择器
5	h1{ color: blue }	0 | 0 | 1	元素选择器

避免重复

优先级的作用可以避免重复的CSS，通常给基本元素定义通用的样式，给不同的元素创建对应的类。

<style>
    /* <p>定义通用的样式，author定义特定的类。 */
    p {
        color: orange;
        font-size: 20px;
        font-family: 宋体;
    }
.author {
    font-size: 16px;
}


</style>

<p class="author">作者：王之涣</p>

<p>白日依山尽，黄河入海流。</p>

<p>欲穷千里目，更上一层楼。</p>

!important

!important 是个特殊的CSS属性，可以强制覆盖所有其他属性。如下代码，内联样式，id选择器，clss选择器定义在同一个元素上，但是优先级最低的class选择器中的color属性因为定义了!important，拥有最高优先级，覆盖了其他color属性。

<style>
    #idSelector {
        color: yellow;
    }
.class-selector {
    color: orange !important;
}


</style>

<p style="color: green;" id="idSelector" class="class-selector">

I'm orange.

</p>

注意，在大型样式表中 !important 会使得阅读和调试 CSS 更困难，除非迫不得已，尽可能避免使用它。尤其是你编辑通用CSS模块或者核心CSS模块的时候，要更加慎重，因为它会导致别人调用你代码的时候，无法覆盖样式。

CSS位置的影响

层叠的规则的作用范围是开发者定义的样式，实际上浏览器会有默认样式，用户也可以自定义样式，它们之间的优先级由低到高：

1. 用户代理样式表中的声明。（例如：浏览器默认样式，例如 p h1 等标签都有默认样式）
2. 用户样式表中的常规声明。（由用户设置的自定义样式，这个我也不懂）。
3. 作者样式表中的声明（这些是web开发人员设置的样式，就是刚才说的内联样式，外联样式的选择器的优先级）
4. 作者样式表中的 !important 声明
5. 用户样式表中的 !important 声明

1. 用户代理样式

用户代理样式（user agent stylesheet），就是浏览器默认样式。

参考：

https://www.w3.org/TR/CSS21/cascade.html#cascade

https://www.w3.org/TR/CSS21/sample.html

https://stackoverflow.com/questions/12582624/what-is-a-user-agent-stylesheet

用户代理（user agent），在 web 开发语境中，指的就是浏览器。

参考：https://en.wikipedia.org/wiki/User_agent

每个浏览器都有一个默认样式，比如 <p> 标签默认样式有上下间距，<h1> 标签默认样式是大号字体，这个样式表的级别是最低的，有任何其他声明的样式，都会覆盖这个默认样式。

要注意的是不同的浏览器甚至同一个浏览器的不同版本，可能默认样式是不一样的。

2. 用户样式表

https://superuser.com/questions/594358/modify-chrome-user-agent-stylesheet

用户样式就是用户可以自己设置一个默认的样式，我感觉使用这种方式的人很少，而且它的优先级比开发者样式要低，所以基本不影响我们开发CSS。chrome 的用户样式我也没设置成功，所以我打算直接跳过这里的内容。

继承

一些设置在父元素上的css属性是可以被子元素继承的（如color和font-family），有些则不能（如width）。

哪些属性属于默认继承很大程度上是由常识决定的，使用多了自然会有感觉。

<!-- color会继承，border、padding 不会继承 -->
<style>
    .class-1 {
        color: orange;
        border: 3px solid greenyellow;
        padding-top: 30px;
    }
</style>
<ul class="class-1">
    <li>第一章</li>
    <li>第二章 <ul>
            <li>2.1</li>
            <li>2.2</li>
            <li>2.3</li>
        </ul>
    </li>
    <li>第三章</li>
</ul>

<!-- background-color 不会继承 -->
<style>
    .class-1 {
        border: 3px solid greenyellow;
        padding: 50px 0px 0px 50px;
        width: 100px;
        height: 100px;
        background: orange;
    }
.class-2 {
    border: 3px solid blue;
    width: 150px;
    height: 150px;
}


</style>

注意 background-color 也不会继承，只不过默认是透明的，所以嵌套的div看上去像是继承了 background-color

<div class="class-1">

div-1

<div class="class-2">

div-2

</div>

</div>

控制继承

https://www.w3.org/TR/css-cascade-3/#inherit-initial

有4个值：

initial(初始)：定义成CSS规范中默认的属性，也就是强制（原本会继承的）属性不继承来自父类的值，而是使用（）默认的值。

inherit(继承)：使当前 CSS 属性的值使用来自父类的值。

unset: 恢复成原来的 inital 或 inherit。原本是 initial 的属性则变成 initial，原本是 inherit 的属性则变成 inherit，其结果不是 initial 就是 inherit。它的作用可以删除级联（cascade）中较早出现的所有其他声明值。

revert: 将属性的值重置为浏览器在其UA样式表中的默认值，就好像该属性没有设置任何CSS一样。该属性值在 caniuse 上比 MDN 上解释更清晰直接：https://caniuse.com/css-revert-value。

（然而，在实际测试中，chrome对 unset 和 revert 的显示和 W3C 中的定义是相反的）

<!-- 测试 initial -->
<div style="color: orange;font-size: 30px;">
    外层div设置了color 和 font-size，这2个属性都是可以继承的。
    <div>嵌套的div默认继承了 color 和font-size</div>
    <div style="color: initial;font-size: initial;">这个 div 设置了 initial</div>
</div>

<!-- 测试 inherit -->
<div style=" border: 10px solid black;padding: 10px;">
    外层 div 设置了 border 和 padding，这两个属性默认不会继承。
    <div>嵌套d iv1 没有继承父元素的 border 和 padding 属性</div>
    <div style="border: inherit;padding: inherit;">嵌套 div2 开启继承（inherit)</div>
</div>

设置 initial 会把原本不继承的属性强制继承父类，原本就继承的那就没有变化，似乎对于原本就继承的属性设置 initial 和不设置 initial 是一样的，但要注意，你的CSS可能在别的地方被修改，但你可以使用 initial 覆盖级联中其他的值，特别是一些元素自带样式，比如 h1 a标签。

<div style="font-size: 30px;">
    外层div设置了font-size: 30px;
    <h1>h1有自己的font-size,覆盖了父元素的font-size</h1>
    <h1 style="font-size: inherit;">这个h1被设置了font-size: inherit;</h1>
</div>

<!-- 测试 unset -->
<style type="text/css">
    .class-color {
        color: orange;
        font-size: 30px;
    }
.class-color-initial {
    color: initial;
    font-size: initial;
}

.class-color-inherit {
    color: inherit;
    font-size: inherit;
}

.class-color-unset {
    color: unset;
    font-size: unset;
}

div {
    padding-left: 30px;
}


</style>

<div class="class-color">

div 1: set color and font-size

<div>

div 1-1: default

</div>

<div class="class-color-initial">

div 1-2: set initial

<div class="class-color-unset">

div 1-2-1: set unset，父div已经initial，而unset根据父元素

</div>

</div>

<div class="class-color-inherit">

div 1-3: set inherit

<div class="class-color-unset">

div 1-3-1: set unset，父div是inherit，而unset根据父元素

</div>

</div>

<div class="class-color-unset">

div 1-4: set unset

</div>

</div>

<!-- 对比 unset 和 revert，在 chrome 中效果令人惊讶 -->
<style>
    /* 用带边框的 div 包围 p，是因为这样可以看清楚 p 的 margin */
    div {
        border: 1px solid black;
        margin-bottom: 10px;
    }
</style>
<div>
    <p>默认p标签，自带margin</p>
</div>
<div>
    <p style="margin:unset">margin:unset， 可以看出 unset 是连 p 标签的内置样式都取消</p>
</div>
<div>
    <p style="margin:revert">margin:revert， 而 revert 是回复原来，这更像是W3上对 unset 的描述 </p>
</div>

重设所有值

CSS 的 shorthand 属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。

<!-- 测试 all -->
<div style="color: orange; border: 1px solid black;">
    <p>我继承了父元素的 color 和 border</p>
    <p style="all: initial;">糟糕，我被 initial 了</p>
</div>

END.