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>