共计 1246 个字符，预计需要花费 4 分钟才能阅读完成。
后面，咱们曾经学完了内联款式、外部款式和内部款式。大家思考一个问题，如果三个样式表润饰同一个元素，哪一个优先起作用呢？（动画演示成果）
带着这个问题，咱们来做个试验。
来到编辑器，创立一个文件夹 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/vide…
https://www.bilibili.com/vide…
