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