之前，我们学过内联样式、内部样式和外部样式。大家思考一个问题，如果三个样式表修改同一个元素，哪个优先？（动画演示效果）带着这个问题，我们来做个实验。进入编辑器，新建文件夹003-multiple-css，在文件夹内新建multiple.html文件。构建基础代码。添加两个元素h1和p，每个元素都填充了一些文本。为h1定义一个内联样式，样式等于colorblue，text-aligncenter。为p定义一个内联样式，样式等于颜色红色。保存文档。在浏览器中打开文件，将添加标题和段落样式。接下来我们添加内部样式，在head元素中添加一个style元素，定义选择器h1，在花括号中定义样式颜色purple。节省。此时，内联样式和内部样式都修改了元素h1。标题的颜色是紫色还是蓝色？在浏览器中查看真相，它是蓝色的！这表明内联样式优先于内部样式。如果还添加外部样式怎么办？我们在当前文件夹下新建一个mystyle.css文件，写入样式：h1、空格、花括号、回车、颜色、冒号、空格、橙色、分号。保存文档。大家要牢记这种文体的书写规律，多练习。返回multiple.html文档，在head元素中的title元素下，通过link元素导入此样式。节省。回到浏览器，发现还是蓝色的！它表明内联样式比外部样式具有更高的优先级。可见内联样式的优先级最高，那么内部样式和外部样式呢？我们去掉html文档中h1元素的行内样式颜色。标题的颜色是内部样式定义的紫色，还是外部样式定义的橙色？回到浏览器再观察，标题的颜色是紫色的！这是否意味着内部样式比外部样式具有更高的优先级？真的是这样吗？让我们再做一个实验。我们把link元素放在style元素下面。节省。发现标题的颜色变成了橙色！这说明浏览器优先读取内部样式，最后读取外部样式！接下来我们将内部样式移动到p元素的底部，现在标题的颜色是不是紫色了？保存文件。在浏览器上看效果，不出所料，标题又变成了紫色！一般我们都知道这个特性，不建议把style定义的内部样式放在body元素里面！更进一步，我们恢复h1中的内联样式颜色蓝色。这一次，标题的颜色是内联样式的蓝色，还是内部样式的紫色？保存文档。回到浏览器看看结果：蓝色！这意味着：内联风格的浏览器是最后阅读的！如果我们去掉内联样式、内部样式和外部样式。节省。正如您应该熟悉的那样，标题的颜色是黑色。实际上，这是浏览器默认的样式，优先级最低。综上所述，当一个HTML元素有多个样式时，动作的优先级如下：在一个HTML元素中，内联样式的优先级最高，它将覆盖外部样式、内部样式和浏览器默认值。头部添加的内部样式和导入的外部样式优先级更高。浏览器默认样式的优先级最低。文章配套视频链接：https://www.bilibili.com/video...https://www.bilibili.com/video...
