您的位置：首页 > Web前端 > CSS

CSS样式优先权

2015-11-28 21:59 771 查看

当同一个 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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css html 浏览器 样式优先权 css引入方式
相关文章推荐
新的分享
章节导航