css 之优先策略

2024-04-27 14:33:58

字体：大中小

来源：转载

供稿：网友

CSS 之优先策略Html代码

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

执行结果：

Html代码

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