CSS樣式優先順序與權重計算方式
阿新 • • 發佈：2018-12-26
CSS一共有四種樣式控制方式:行內樣式、內嵌樣式、連結樣式、匯入樣式(@import).選擇器則有標籤選擇器,類名選擇器,ID選擇器,和偽標籤選擇器四種.那麼它們的優先順序與權重又是計算的呢?
首先上權重計算方法:
一.內聯 > id > class >標籤
權重計算數值
1.內聯樣式 1000
2.id樣式 0100
3.class樣式 0010 hover,nth-child()等CSS3"偽標籤"權重與"真-class"相同;
4.標籤樣式 0001以後是權重計算數值,也就是說,ul li a{}中的樣式,將會比li a{}級別更高,因而
<ul>
<li>
<a>test</a>
</li>
</ul>
<style>
ul li a{ //權重等於0003
color:red
}
li a{ //權重等於0002
color:blue
}
</style>
中的test字型顏色將會是紅色而非藍色.而當樣式設定位於同一種樣式控制方式,比如全為連結時候,將會後者覆蓋前者(CSS疊加樣式表是進行樣式的不斷疊加,因而同一權重,後者會覆蓋前者).
二,同權重,樣式設定方式不同
而當樣式設定權重相同但位於不同樣式設定方式時,將會按照
行內樣式
假如
<ul>
<li>
<a>test</a>
</li>
</ul>
<style>
ul li a{ //權重等於0003,但是位於連結樣式中
color:red
}
ul li a{ //權重等於0003,但是位於內嵌樣式中
color:blue
}
</style>
而這一次,test文字的字型顏色將為藍色.
三.匯入樣式(@import)與內嵌樣式
至於匯入樣式(@import)則是將其匯入到內嵌樣式中,故而其優先順序與內嵌樣式相同,同樣符合疊加原理,或者說就近原則
<link href="test.css" type="text1/css" rel="stylesheet">
<title>新建網頁標題</title>
<style>
@import "test2.css";
</style>
</head>
<body>
// 此時同權重樣式會顯示"@import中的",而非"<link/>"中的
<title>新建網頁標題</title>
<style>
@import "test2.css";
</style>
<link href="test.css" type="text1/css" rel="stylesheet">
</head>
<body>
// 此時同權重樣式會顯示"<link/>中的,而非@import"中的
四,測試宣告
本文所言均已經經過本人測試,而本文則是為了整理以往的網路材料,並修正其他前輩們的一些錯誤,如果你發現了本文中的一些錯誤,遺漏或者對此有什麼疑問,請在博文下方留言,本人會及時回覆.以下是本人的測試環境.
本文章中測試環境,如下:
谷歌版本: 50.0.2652.2 (64-bit);
Opera:36.0.2130.32 ,Windows 10 64-bit (WoW64);
火狐:44.0.2;
IE:11.162.10586.0;