|
前面，咱们已然学完了内联样式、内部样式和外边样式。大众思考一个问题，倘若三个样式表修饰同一个元素，哪一个优先起功效呢？（动画演示效果）
带着这个问题，咱们来做个实验。
来到编辑器，创建一个文件夹 003-multiple-css，在文件夹里创建一个 multiple.html 文件。构建基本代码。
添加 h1 和 p 两个元素，分别填入有些文本。给 h1 定义内联样式，style 等于 color blue，text-align center。给 p 定义内联样式，style 等于 color red。保留文件。
在浏览器中打开文件，标题和段落的样式就添加好了。
接下来咱们添加内部样式，在 head 元素里添加 style 元素，定义选取器 h1，在花括号里定义样式 color purple。保留。
此时，内联样式和内部样式都对元素 h1 做了修饰，标题的颜色是紫色还是蓝色呢？
在浏览器里瞧瞧真相，是蓝色！这说明内联样式的功效优先级高于内部样式。
倘若外边样式亦加进来会怎么样呢？咱们在当前文件夹下创建一个 mystyle.css 文件，编写样式：h1，空格，花括号，回车，color，冒号，空格，orange，分号。保留文件。
这个样式的书写规范大众要牢记，并多加练习。
回到 multiple.html 文档，在 head 元素里的 title 元素下边，经过 link 元素引入这个样式。保留。
回到浏览器，发掘还是蓝色！说明内联样式的功效优先级亦高于外边样式。
可见，内联样式功效优先级最高，那内部样式和外边样式呢？
咱们把 html 文档里 h1 元素的内联样式 color 去掉，标题的颜色是内部样式定义的紫色，还是外边样式定义的橙色呢？
回到浏览器再观察，标题的颜色是紫色！这说明内部样式比外边样式的优先级高？事实是这般吗？
咱们再做个实验。
咱们把 link 元素放到 style 元素的下边。保留。
发掘，标题的颜色是变成为了橙色！
这说明，内部样式和外边样式，浏览器最后读取的优先级最高！
接下来咱们将内部样式移动到 p 元素的下边，此时标题的颜色会是紫色吗？保留一下文件。
在浏览器上看效果，果然不出所料，标题又变成为了紫色！
通常咱们晓得这个特性就好了，不意见将 style 定义的内部样式放到 body 元素内部！
更近一步，咱们在 h1 里恢复内联样式 color blue，这回标题的颜色是内联样式的蓝色，还是内部样式的紫色呢？保留文件。
回到浏览器再看一下结果：蓝色！
这说明：内联样式浏览器是最后读取的！
如果咱们去掉内联样式，内部样式，和外边样式。保留。
你应该熟悉，标题的颜色为黑色。
其实，这是浏览器的默认样式，优先级最低。
总结一下，当一个HTML元素有一个以上的样式时，功效优先级如下：
在一个HTML元素内，内联样式优先级最高，会覆盖外边样式和内部样式以及浏览器默认值。
在 head 里添加的内部样式和引入的外边样式，后添加和引入的优先级高。
浏览器默认样式优先级最低。
文案配套视频链接：https://www.bilibili.com/video/BV1oU4y1278g?p=56
| 
发表于 2024-6-30 08:23:41
