1. 程式人生 > >CSS選擇器的權重問題

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 

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

總結:

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

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