一、CSS的层叠

CSS的全称是

Cascading Style Sheets，

中文翻译为“层叠样式表”。

1、声明冲突

● 什么是声明冲突？

举个栗子：

【1】代码：

【2】显示效果：

通过上述栗子，我们可以看出什么是“声明冲突”。

所谓“声明冲突”就是同一样式，多次应用到同一元素。

● 怎么解决声明冲突？

冲突 != 错误

通过CSS层叠解决声明冲突，浏览器会自动处理。

2、层叠

● 层叠的三部曲

● 比较重要性（优先级）

先了解几个概念：

① 样式表的分类：

I、用户样式表

浏览器的用户提供。

II、作者样式表

网页开发者提供。

III、默认样式表

浏览器自身提供。

② 重要声明与普通声明

若属性值后跟上! important 就表示这是一条重要声明，反之则是普通声明。

注意：一般不建议使用! important ，在实际开发中，需求在不断变化，重要声明可能变成普通申明。

③ 重要性（优先级）从高到低：

用户样式表中的重要声明作者样式表中的重要声明作者样式表中的普通声明用户样式表中的普通声明浏览器默认样式表中的声明

重要性（优先级）高的会替换重要性（优先级）低的样式。

● 比较特殊性

比较特殊性，看选择器的适用范围的大小。

总体规则：选择器选中的范围越窄，越特殊。

越特殊的样式会被最终应用。

特殊性从高到低：内联样式——id选择器——类选择器——元素选择器——通配符选择器

在比较特殊性时，每个冲突的声明会生成四位数（a b c d）来比较特殊性，值越大，越特殊。

千位：如果是内联样式，记1，否则记0。

看下面

百位：等于选择器中id选择器的数量

十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量

个位：等于选择器中所有元素选择器、伪元素选择器的数量

● 比较源次序

当CSS样式的重要性和特殊性都相同时，

比较源次序，简单说就是最后出现的声明胜出，其他的淘汰。

3、小试牛刀

● html代码

● css代码

二、CSS的继承与非继承

当元素的一个继承属性 （inherited property）没有指定值时，则取父元素的同属性的计算值 computed value。只有文档根元素取该属性的概述中给定的初始值（initial value）（这里的意思应该是在该属性本身的定义中的默认值）。

通常，跟文字内容相关的属性都能被继承。

1、继承属性的一个典型例子就是 color 属性。给出以下样式规则：

p { color: green; }

<p>This paragraph has <em>emphasized text</em> in it.</p>

…文本 "emphasized text" 就会呈现为绿色，因为 em 元素继承了 p 元素 color 属性的值，而没有获取 color 属性的初始值（这个 color 值用于页面没有指定 color 时的根元素）。

2、非继承属性的一个典型例子就是 border 属性。给出以下样式规则：

 p { border: medium solid; }

 <p>This paragraph has <em>emphasized text</em> in it.</p>

…文本 "emphasized text" 就没有边框，因为 border-style 属性的初始值为none。

3、如何查看一个元素是默认继承还是默认不继承？

● 查看权威网站：

● 比如查看background是否默认继承

4、特殊CSS属性值

- inherit：手动（强制）继承，将父元素的值取出应用到该元素

- initial：初始值，将该属性设置为默认值

三、 CSS渲染过程

1、CSS渲染过程

● 确定声明值

参考样式表中没有冲突的声明，作为CSS属性值

● 层叠冲突

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

● 使用继承

对仍然没有值的属性，若可以继承，则继承父元素的值

● 使用默认值

对仍然没有值的属性，使用默认值

2、小试牛刀

问题：

a元素中的“今日头条”显示的是什么颜色？

p元素中的“Python大星”显示的是什么颜色？

why？欢迎评论区留言。

四、上一集

>>>《Python Web全栈之旅04--Web前端●走入CSS的世界》