CSS選擇器的權重問題

CSS是可以用來添加樣式的

有內部樣式(內部樣式就是在html文件中通過<style></style>標籤來添加樣式)和

外聯樣式(通過<link>標籤將外部的樣式css文件引入到html文件中)

還有行間樣式,即在元素標籤中通過style="  "添加樣式;


而在各個不同的樣式添加中,優先級就決定了最後真正能呈現在頁面的效果;


而添加樣式是通過CSS選擇器選擇指定的標籤進行添加的,而選擇器也不是唯一的:

1、id選擇器(唯一的 與標籤只能是一對一)

2、class選擇器(與標籤可以一對多或者多對一)

3、標籤選擇器(標籤名稱)

4、通配符選擇器(“*”一般用來初始化所有標籤)


此時優先級是:行間樣式 > id選擇器 > class選擇器||屬性選擇器 > 標籤選擇器 > 通配符選擇器


補充:當絕對需要確定一個元素具有特定的屬性CSS時,可以在樣式後添加------------!important

例如

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>權重問題</title>
	<style type="text/css">
	.blue{
		color: blue;
	}
	</style>
</head>
<body>
<p style="color: red" class="blue">行間紅色,class選擇器是藍色</p>
</body>
</html>

因爲行間樣式的優先級更高,所以字應該是紅色

但是如果在class選擇器的顏色設置後面添加!important;

color:blue !important;

文字變成了藍色



所以優先級的順序應該是:

!important > 行間樣式 > id選擇器 > class選擇器||屬性選擇器 > 標籤選擇器 > 通配符選擇器


對應有個權重的問題,反正最後有個結果如下

                                          權重值

 !important                        Infinity

行間樣式                          1000

id選擇器                           100

                                                                          class | 屬性 | 僞類                    10

                                                                              標籤 | 僞元素                         1

通配符                                0 



**注意**:只要是寫在同一排的選擇器,將其權重相加,即可求出誰的優先級更高;


總結:

以前在引用別人的網頁的時候,想要修改一下樣式,但是不管怎麼添加樣式都得不到想要的效果,現在明白了;

因爲對於同一個標籤,可以有多種方式來選中,所以可能有的時候就是權重的問題,導致代碼難以修改;



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章