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
多个样式应用于同一个元素的时候,层叠的规则决定了发生冲突时应该使用哪条样式。其中有个非常重要的概念就是优先级。
了解层叠的规则需要考虑三个因素(重要程度由高到低):
- 重要程度
- 优先级
- 资源顺序
资源顺序
样式层叠最基本的规则:简单地说就是相同级别(优先级)的规则应用到同一个元素时,实际使用的是最后面的规则。
<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>
如何计算优先级
使用选择器定义样式的时候,不同的选择器会有不同的优先级。如何计算优先级(优先级由高到低):
在 style 中声明的内联样式。
外联样式,选择器
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位置的影响
层叠的规则的作用范围是开发者定义的样式,实际上浏览器会有默认样式,用户也可以自定义样式,它们之间的优先级由低到高:
- 用户代理样式表中的声明。(例如:浏览器默认样式,例如
p
h1
等标签都有默认样式) - 用户样式表中的常规声明。(由用户设置的自定义样式,这个我也不懂)。
- 作者样式表中的声明(这些是web开发人员设置的样式,就是刚才说的内联样式,外联样式的选择器的优先级)
- 作者样式表中的
!important
声明 - 用户样式表中的
!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.