CSS样式优先权

最新推荐文章于 2022-11-02 10:36:16 发布

pxy_Shineyo

最新推荐文章于 2022-11-02 10:36:16 发布

阅读量586

点赞数

分类专栏： CSS 文章标签： css html 浏览器样式优先权 css引入方式

本文链接：https://blog.csdn.net/PXYStyle/article/details/50087903

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 1拥有最高的优先权。
1.内联样式（在 HTML 元素内部）
2.内部样式表（位于标签内部）
3.外部样式表
4.浏览器缺省设置

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="test.css">
    <style type="text/css">
        .div{
            background-color: #ddd;
        }
    </style>
</head>
<body>
<input id="input1" type="button" value="35选7">\
<div class="div" style="background-color:#426DB7; width:300px;height:200px;color:#fff;">样式优先级</div>
</body>
</html>

外部样式表

.div{
    background-color: ##E91818;
}

浏览器渲染后div显示的背景颜色是: #426DB7

pxy_Shineyo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式优先权

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 1拥有最高的优先权。 1.内联样式（在 HTML 元素内部） 2.内部样式表（位于标签内部） 3.外部样式表 4.浏览器缺省设置因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样
复制链接

扫一扫

专栏目录