資訊專欄INFORMATION COLUMN
摘要：由不同選擇器組成的選擇元素的方式暫且稱之為規(guī)則吧。通過計算選擇器的特殊性值，特殊性最高的規(guī)則將會勝出并被利用。內(nèi)聯(lián)樣式特殊性為，因此內(nèi)聯(lián)聲明的特殊性最高。標志為的聲明并沒有特殊的特殊性值，此時該聲明為重要聲明，超過所有非重要聲明。
前言
通常我們在設置鏈接的一些偽類（link，visited，hover，active）樣式時，要讓不同的狀態(tài)顯示正確的樣式，我們需要按一定的順序設置這些偽類的樣式。這里我就按CSS2規(guī)范中推薦的順序進行介紹，即 link-visited-hover-active，可記為 LoVe-HAte 。
要想弄明白為什么是這個順序，首先我們需要知道，CSS在確定應當向一個元素應用哪些樣式時，這通常不僅需要考慮 繼承，還要考慮聲明的 特殊性，另外需要考慮聲明本身的來源，這個過程就成為 層疊。下面我們分別來看看 特殊性、繼承 和 層疊 這3種機制之間的關聯(lián)。
特殊性在實際的應用中，我們都知道一個元素可以通過多種選擇器來進行選擇，如ID選擇器、類選擇器等等，具體可看CSS選擇器詳解。由不同選擇器組成的選擇元素的方式暫且稱之為 規(guī)則 吧。考慮以下3對規(guī)則，當然每對規(guī)則都選擇同樣的元素：
/* 規(guī)則1 */
h1 {
color: red;
}
body h1 {
color: purple;
}
/* 規(guī)則2 */
h2.grape {
color: purple;
}
h2 {
color: silver;
}
/* 規(guī)則3 */
html > body table tr[id="totals"] td ul > li {
color: maroon;
}
li#answer {
color: navy;
}
顯然，每一對規(guī)則中只有一個勝出，因為所匹配的元素只能是某一種顏色。那么怎么知道哪一個規(guī)則更強呢？
答案就在于每個選擇器的特殊性。通過計算選擇器的特殊性值，特殊性最高的規(guī)則將會勝出并被利用。 這里先預留一個問題，如果特殊性相等的兩個規(guī)則將如何確定應用？后面的層疊再介紹。
特殊性值特殊性值表述為4個部分，如：0,0,0,0。一個選擇器的具體特殊性如下確定：
對于選擇器中給定的各個ID屬性值，加0,1,0,0。
對于選擇器中給定的各個類屬性值、屬性選擇或者偽類，加0,0,1,0。
對于選擇器中給定的各個元素和偽元素，加0,0,0,1。
結(jié)合符和通配選擇器 * 對特殊性沒有任何貢獻，加0,0,0,0。
內(nèi)聯(lián)樣式特殊性為1,0,0,0，因此內(nèi)聯(lián)聲明的特殊性最高。
標志為 !important 的聲明并沒有特殊的特殊性值，此時該聲明為重要聲明，超過所有非重要聲明。
通過以上的介紹，我們就可以計算出本節(jié)剛開始介紹的3組規(guī)則的特殊性值及被應用的規(guī)則：
/* 規(guī)則1 */
h1 { /* 0,0,0,1 */
color: red;
}
body h1 { /* 0,0,0,2 （元素應用該規(guī)則） */
color: purple;
}
/* 規(guī)則2 */
h2.grape { /* 0,0,1,1 （元素應用該規(guī)則） */
color: purple;
}
h2 { /* 0,0,0,1 */
color: silver;
}
/* 規(guī)則3 */
html > body table tr[id="totals"] td ul > li { /* 0,0,1,7 */
color: maroon;
}
li#answer { /* 0,1,0,1 （元素應用該規(guī)則） */
color: navy;
}
繼承
基于繼承機制，樣式不僅應用到指定的元素，還會應用到它的后代元素。下面的例子幫你了解繼承是如何工作的：
ul {
color: red;
}
- ul下的第一個li
- ul下的第二個li
- ul下的第三個li
- ol下的第一個li
- ol下的第二個li
- ol下的第三個li
效果：
原理就是將聲明 color: red; 應用到 ul 元素時，這個元素會采用該聲明。然后將這個值再沿著文檔樹向下傳播到后代元素，并一直繼承，直到再沒有更多的后代元素繼承這個值為止。值絕對不會向上傳播，也就是說，元素不會把值向上傳遞到其祖先。
重要：繼承值是完全沒有特殊性的，因此特殊性值為0,0,0,0的特殊性也比其高，說明繼承值很容易被其他方式中的聲明取代。
層疊在 特殊性 一節(jié)中我們預留了一個問題：如果特殊性相等的兩個規(guī)則將如何確定應用？假設有以下規(guī)則：
h1 {
color: red;
}
h1 {
color: blue;
}
哪一個會占上風？這兩個規(guī)則的特殊性都是0,0,0,1，所以它們的權重相等，都應當應用到元素，但這是不可能的，因為一個元素不可能既是紅色又是藍色（實際是藍色）。因此這里 層疊 就出場了，先看看層疊規(guī)則：
下面分別介紹規(guī)則中后三條規(guī)則。
按權重和來源排序根據(jù)第二條規(guī)則，如果兩個樣式規(guī)則應用到同一個元素，而且其中一個規(guī)則有 !important 標志，這個重要規(guī)則將勝出.
p {
color: gray !important;
}
Well, hello there!
效果：
Well, hello there!
另外，還要考慮規(guī)則的來源。來源權重由大到小的順序依次為：
讀者的重要聲明（有 !important）
創(chuàng)作人員的重要聲明（有 !important）
創(chuàng)作人員的正常聲明
讀者的正常聲明
用戶代理聲明
按特殊性排序根據(jù)第三條規(guī)則，如果向一個元素應用多個彼此沖突的聲明，而且它們的權重相同，則按特殊性排序，最特殊的聲明最優(yōu)先。
p#bright {
color: silver;
}
p {
color: black;
}
Well, hello there!
效果：
Well, hello there!
按順序排序最后，根據(jù)第四條規(guī)則，如果兩個規(guī)則的權重、來源和特殊性完全相同，那么在樣式表中后出現(xiàn)的一個會勝出。
h1 {
color: red;
}
h1 {
color: blue;
}
我是藍色的標題1
效果：
好了，通過前面的介紹，我想大家應該基本了解CSS是如何確定應當向一個元素應用哪些值的。回到前言說到的鏈接樣式順序，為了正確的表現(xiàn)所設置的樣式，我們必須按一定的順序進行樣式設置。根據(jù)CSS2規(guī)范中的推薦順序，即 link-visited-hover-active，聲明樣式如下：
:link {
color: blue;
}
:visited {
color: purple;
}
:hover {
color: red;
}
:active {
color: orange;
}
根據(jù)之前的介紹，以上這些選擇器的特殊性都是一樣的：0,0,1,0。因此他們有相同的權重、來源和特殊性，因此與元素匹配的最后一個選擇器才會勝出。
正在 “點擊” 的 未訪問 鏈接可以與其中3個規(guī)則匹配 —— :link、:hover、:active，所以按照上面的聲明順序，:active將勝出，這可能就是我們所期望的。
假設我們忽略這種常用的順序，而是按字母順序排列鏈接樣式，聲明樣式如下:
:active {
color: orange;
}
:hover {
color: red;
}
:link {
color: blue;
}
:visited {
color: purple;
}
按照這種順序，任何鏈接都不會顯示 :hover 或者 :active，因為 :link 和 :visited 規(guī)則后出現(xiàn)。所有鏈接都必須要么是已訪問（:visited），要么是未訪問（:link），所以 :link 和 :visited 樣式總是會覆蓋 :hover 或者 :active。
當然鏈接樣式也可以根據(jù)自己的實際需要設定某一種順序，比如 link-hover-visited-active 這樣的一個順序，起到的效果是 只有未訪問的鏈接會有懸停樣式，已訪問的鏈接沒有懸停樣式。
最后，由于可以把偽類鏈接起來，所以可以不必擔心這些問題。以下規(guī)則可以任何順序列出，而不必擔心有什么負面影響：
:link {
color: blue;
}
:visited {
color: purple;
}
:link:hover {
color: red;
}
:visited:hover {
color: gray;
}
:link:active {
color: orange;
}
:visited:active {
color: silver;
}
結(jié)語
通過對鏈接樣式順序為什么是 link-visited-hover-active 的解答，我希望幫助大家能加深了解CSS在確定應當向一個元素應用哪些樣式時的一些基本原理。
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112751.html
摘要：使用帶前綴的命名空間可以防止命名沖突，同時提高代碼可維護性。聲明結(jié)束每行都應以分號結(jié)尾。排查法檢查是否正確檢查下有拼寫錯誤是否忘記結(jié)尾的等。可以利來檢查的拼寫錯誤。本是為減肥的具，但也能檢查出拼寫錯誤。 ID和Class命名風格 1.id 和 class 的命名總規(guī)則為：內(nèi)容優(yōu)先，表現(xiàn)為輔。?先根據(jù)內(nèi)容來命名，?如 main-nav。如 果根據(jù)內(nèi)容找不到合適的命名，可以再結(jié)合表現(xiàn)來定，...
摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅持每天花分鐘來學習與思考。 今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點，受到很多朋友的關注，都強烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個React的使用者，他們給出了328道React的面試題，由我整理好發(fā)給大家，同時發(fā)布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時大...
摘要：前端面試每日題，以面試題來驅(qū)動學習，每天進步一點讓努力成為一種習慣，讓奮斗成為一種享受相信堅持的力量項目地址推薦歡迎跟一起折騰前端，系統(tǒng)整理前端知識，目前正在折騰，打算打通算法與數(shù)據(jù)結(jié)構(gòu)的任督二脈。 《論語》，曾子曰：吾日三省吾身（我每天多次反省自己）。 前端面試每日3+1題，以面試題來驅(qū)動學習，每天進步一點！ 讓努力成為一種習慣，讓奮斗成為一種享受！相信 堅持 的力量！！！ 項目...
閱讀 1669·2021-11-16 11:41
閱讀 2462·2021-11-08 13:14
閱讀 3113·2019-08-29 17:16
閱讀 3082·2019-08-29 16:30
閱讀 1849·2019-08-29 13:51
閱讀 361·2019-08-23 18:38
閱讀 3230·2019-08-23 17:14
閱讀 634·2019-08-23 15:09
