您现在的位置是： 首页> CSS>CSS样式优先级 所属分类：CSS
CSS样式优先级
初柒先生
2019-09-18 09:26
【css】
【优先级】
195人已围观
简介为了避免css样式混淆，有必要学习一下css样式的优先级！
1、CSS样式优先级介绍
浏览器优先级：设计者设计样式>浏览器用户自定义样式>浏览器自设定样式
html代码中：行内样式>内部样式=外部引用样式（当优先级一样时，以就近原则）
!important：表示提升指定样式规则的应用优先权（最高优先权）
2、示例演示
外部样式“style1.css”，设置背景色为绿色：
.content{
background:green;
}
外部样式“style2.css”，设置背景色为黑色：
.content{
background:black;
}
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css优先权测试</title>
<!-- 外部引用样式 -->
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" type="text/css" href="style2.css">
<!-- 内部样式 -->
<style type="text/css">
html,body {
width:100%;
height:100%;
margin:0;
padding:0;
}
.content{
height:100px;
width:100px;
margin:0 auto;/*水平居中*/
background:red;
/*垂直居中:布局点为左上角*/
position:relative;
top:50%;
margin-top:-50px;
}
</style>
</head>
<body>
<!-- 行内样式 -->
<div class="content" style="background:blue"></div>
</body>
</html>
（1）首先，这个例子根据优先级显示的是行内样式蓝色
（2）去掉”行内样式“背景色的设置，显示内部样式红色
（3）去掉”内部样式“背景色的设置，显示外部引用样式样式style2.css黑色
（4）去掉”外部引用样式样式style2.css“背景色的设置，显示外部引用样式样式style1.css绿色
（5）当外部引用位于内部样式下面时，显示外部引用样式style1.css绿色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css优先权测试</title>
<!-- 内部样式 -->
<style type="text/css">
html,body {
width:100%;
height:100%;
margin:0;
padding:0;
border:1px solid red;
}
.content{
height:100px;
width:100px;
margin:0 auto;/*水平居中*/
background:red;
/*垂直居中:布局点为左上角*/
position:relative;
top:50%;
margin-top:-50px;
}
</style>
<!-- 外部引用样式 -->
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<!-- 行内样式 -->
<div class="content" style="background:"></div>
</body>
</html>
（6）当在内部样式背景色设置”!important“时，则内部样式优先显示，红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css优先权测试</title>
<!-- 内部样式 -->
<style type="text/css">
html,body {
width:100%;
height:100%;
margin:0;
padding:0;
}
.content{
height:100px;
width:100px;
margin:0 auto;/*水平居中*/
background:red!important;
/*垂直居中:布局点为左上角*/
position:relative;
top:50%;
margin-top:-50px;
}
</style>
<!-- 外部引用样式 -->
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<!-- 行内样式 -->
<div class="content" style="background:"></div>
</body>
</html>总结：
（1）不论显示那种样式，以靠近内容的优先显示(就近原则)；
（2）可以通过"!important"修改为最高优先级，如果都设置就以就近原则显示样式。
很赞哦！ (0)
文章评论
猜你喜欢
喜欢你喜欢的！
