css 之优先策略

2022-10-16 20:33:25

Html代码

<html>
<head>
<title>testCSS</title>
<style type="text/css">
h2{
color:red;
}
h2{
color:green;
}
h3{
color:red;
}
h5{
color:green;
}
</style>
<link rel="stylesheet" type="text/css" href="a.css" />
</head>
<body>
<h1 style="color:red;color:green">1.绿色，当内联的方式定义color:red;color:green，以后面的为准，后面会把前面的覆盖</h1>
<h2 >2.绿色，当内联的方式定义两次颜色，以后面的为准，后面会把前面的覆盖</h2>
<h3 style="color:green">3.当以内联和内部样式表的方式定义，内联优先于内部样式表</h3>
<h4 style="color:green">4.当以内联和内部样式表的方式定义，内联优先于内部样式表,与内部样式表存放的位置无关</h3>
<h5>5.当内部样式表和外部样式表同时定义时，与内联样式与外部样式表定义的顺序有关，以后面为准，后面会把前面的覆盖</h5>
</body>
<style type="text/css">
h4{
color:red;
}
</style>
</html>

执行结果：

Html代码

<html>
<head>
<title>testCSS</title>
<style type="text/css">
h1{
color:green;
}
#h1id{
color:blue;
}
.h1class{
color:yellow;
}
#h2id h2{
color:blue;
}
.h2class h2{
color:yellow
}
div h2{
color:red;
}
</style>
</head>
<body>
一、内联>>id选择器>>类选择器>>标签选择器 >>：表示优先的意思 <br>
<h1 style="color:red" id="h1id" class="h1class">1.红色内联、标签选择器、类选择器、id选择器都符合，优先内联</h1>
<h1 style="" id="h1id" class="h1class">2.蓝色标签选择器、类选择器、id选择器都符合，优先id选择器</h1>
<h1 style="" class="h1class">3.黄色标签选择器、类选择器都符合，优先类选择器</h1>
<h1 style="" >4.绿色最终才是标签选择器</h1>
二、派生选择器依然遵守上面的规律 id派生>>类派生 >>标签派生
<div id="h2id" class="h2class"><h2>1.蓝色</h2></div>
<div class="h2class"><h2>2.黄色</h2></div>
<div ><h2>3.红色</h2></div>
</body>
</html>

码农公寓