HTML中常見的選擇器 的優先順序
在HTML中常見選擇器有:
行內選擇器、標籤選擇器、id選擇器、類選擇器(class)
行內選擇器:通過style將樣式直接寫在標籤裡面:
格式為:style=“屬性1:屬性值1;屬性2:屬性值2;…”
例如:<p style=”color: red;font-size: 32px;”>啊啊啊啊</p>
注意:最後一個屬性值後面的分號可以省略,其他的屬性與屬性之間必須要有分號分開;現在行內選擇器也比較少用,原因是比較繁瑣,程式碼比較少可以考慮使用,但是程式碼一多,就很不好用了
標籤選擇器:就是利用標籤名通過內部樣式將標籤+樣式給表現出來;
格式:標籤{ 樣式1;樣式2;…}
例如:
<html>
<head>
<title>標籤選擇器</title>
<style type="text/css">
p{
color:green;
font-size:14px;
}
</style>
</head>
<body>
<p>啊啊啊</p>
</body>
</html>
注意:標籤選擇器:運用範圍是:標籤的樣式是同一格式的範圍情況下,比較適用,但在同一標籤多種樣式的情況下不適合適用;
id選擇器:在標籤內定義一個id=“idname”,在內部樣式中使用:#idname{樣式}的方式使用id選擇器。
類選擇器(class):在標籤內定義一個class=“classname”,在內部樣式中使用: .classname{樣式}的方式使用id選擇器。
行內樣式:寫在標籤裡面通過style=“屬性1:屬性值1;….”的方式改變標籤樣式;例如
<p style="color:red">啊啊啊</p>
優先順序:
**id選擇器>標籤選擇器
行內樣式>id選擇器
類選擇器>標籤選擇器
id選擇器>類選擇器
即
行內樣式(最高階)>id選擇器>類選擇器>標籤選擇器
**
例子:
類選擇器與標籤選擇器的優先順序:
<html>
<head>
<meta charset="utf-8" />
<title>HTML選擇器的優先順序</title>
<style type="text/css">
p{
color: green;/*綠色*/
}
.blue{
color: blue;/*藍色*/
}
#red{
color: red;/*紅色*/
}
</style>
</head>
<body>
<h3>望廬山瀑布</h3>
<p >日照香爐生紫煙,</p>
<p class="blue">遙看瀑布掛前川。</p>
<p class="blue" id="red">飛流直下三千尺,</p>
<p class="blue" id="red" style="color: black;">疑是銀河落九天。</p>
</body>
</html>
如圖
從第一句到第四句可以很清楚的看到優先的變化是按照
行內樣式(最高階)>id選擇器>類選擇器>標籤選擇器來變化的