如何設定CSS連結樣式
如何用CSS為連結設定不同樣式
通常需要設定一些連結的樣式來美化頁面，網頁設計中。連結的樣式能設定很多種，但是如何能實現我想要的效果，那就需要設定樣式的優先順序，通常可以通過連結的一些偽類樣式順序來實現。下面，分享一下如何設定CSS連結樣式。
要讓不同的狀態顯示正確的樣式，通常我設定連結的一些偽類（link，visited，hover，active）樣式時。需要按一定的順序設定這些偽類的樣式。這裡我就按CSS2規範中推薦的順序進行介紹，即 link-visited-hover-act可記為LoVe-HAte
首先我需要知道，要想弄明白為什麼是這個順序。CSS確定應當向一個元素應用哪些樣式時，這通常不只需要考慮 繼承，還要考慮宣告的特殊性，另外需要考慮宣告自身的來源，這個過程就成為 層疊。下面我分別來看看特殊性、繼承 和 層疊 這3種機制之間的關聯。
特殊性
都知道一個元素可以通過多種選擇器來進行選擇，實際的應用中。如ID選擇器、類選擇器等等，具體可看CSS選擇器詳解。由不同選擇器組成的選擇元素的方式暫且稱之為規則吧。考慮以下3對規則，當然每對規則都選擇同樣的元素：
h1{color:red;} bodih1{color:purple;} h2.grape{color:purple;} h2{color:silver;} html>boditabltr[id=”totals”]tdul>li{color:maroon;} li#answ{color:navy;}
每一對規則中只有一個勝出，顯然。因為所匹配的元素只能是某一種顏色。那麼怎麼知道哪一個規則更強呢？
特殊性最高的規則將會勝出並被利用。這裡先預留一個問題，答案就在於每個選擇器的特殊性。通過計算選擇器的特殊性值。如果特殊性相等的兩個規則將如何確定應用？後面的層疊再介紹。
特殊性值
特殊性值表述為4個部分，如：0,0,0,0。一個選擇器的具體特殊性如下確定：
對於選擇器中給定的各個ID屬性值，加0,1,0,0。 對於選擇器中給定的各個類屬性值、屬性選擇或者偽類，加0,0,1,0。 對於選擇器中給定的各個元素和偽元素，加0,0,0,1。 結合符和通配選擇器 * 對特殊性沒有任何貢獻，加0,0,0,0。 內聯樣式特殊性為1,0,0,0，因此內聯宣告的特殊性最高。 標誌為 !important 的宣告並沒有特殊的特殊性值，此時該宣告為重要宣告，超過所有非重要宣告。
筱丶曉的個人部落格：blog.sdxseo.com
就可以計算出本節剛開始介紹的3組規則的特殊性值及被應用的規則：通過以上的介紹。
h1{color:red;} bodih1{color:purple;} h2.grape{color:purple;} h2{color:silver;} html>boditabltr[id=”totals”]tdul>li{color:maroon;} li#answ{color:navy;}
繼承
樣式不只應用到指定的元素，基於繼承機制。還會應用到後代元素。下面的例子幫你解繼承是如何工作的
ul{color:red;}
- ul下的第一個li
- ul下的第二個li
- ul下的第三個li
- ol下的第一個li
- ol下的第二個li
- ol下的第三個li
效果：
ul下的第一個li
ul下的第二個li
ul下的第三個li
● ol下的第一個li
● ol下的第二個li
● ol下的第三個li
這個元素會採用該宣告。然後將這個值再沿著文件樹向下傳播到後代元素，原理就是將宣告 color:red;應用到ul元素時。並一直繼承，直到再沒有更多的後代元素繼承這個值為止。值絕對不會向上傳播，也就是說，元素不會把值向上傳遞到其祖先。
說明繼承值很容易被其他方式中的宣告取代。重要：繼承值是完全沒有特殊性的因此特殊性值為0,0,0,0特殊性也比其高。
層疊
特殊性一節中我預留了一個問題：如果特殊性相等的兩個規則將如何確定應用？假設有以下規則：
h1{color:red;} h1{color:blue;}
都應當應用到元素，但這是不可能的因為一個元素不可能既是紅色又是藍色（實際是藍色）因此這裡層疊 就出場了先看看層疊規則：哪一個會佔上風？這兩個規則的特殊性都是0,0,0,1所以它權重相等。
下面分別介紹規則中後三條規則。
按權重和來源排序
如果兩個樣式規則應用到同一個元素，根據第二條規則。而且其中一個規則有 !import標誌，這個重要規則將勝出.
p{color:grai!important;}
Well, hello there!
效果：
Well, hello there!
還要考慮規則的來源。來源權重由大到小的順序依次為：另外。
讀者的重要宣告（有 !important）
創作人員的重要宣告（有 !important）
創作人員的正常宣告
讀者的正常宣告
使用者代理宣告
按特殊性排序
如果向一個元素應用多個彼此衝突的宣告，根據第三條規則。而且它權重相同，則按特殊性排序，最特殊的宣告最優先。
p#bright { color: silver; } p { color: black; }
Well, hello there!
效果：
hellothereWell.!
按順序排序
根據第四條規則，最後。如果兩個規則的權重、來源和特殊性完全相同，那麼在樣式表中後出現的一個會勝出。
h1{color:red;} h1{color:blue;}
藍色的標題1
1
藍色的標題1
效果：
藍色的標題1
連結樣式順序
想大家應該基本瞭解CSS如何確定應當向一個元素應用哪些值的回到前言說到連結樣式順序，好了通過前面的介紹。為了正確的表示所設定的樣式，必需按一定的順序進行樣式設定。根據CSS2規範中的推薦順序，即 link-visited-hover-act宣告樣式如下：
:link{color:blue;}:visit{color:purple;}:hover{color:red;}:activ{color:orange;}
根據之前的介紹，以上這些選擇器的特殊性都是一樣的：0,0,1,0。因此他有相同的權重、來源和特殊性，因此與元素匹配的最後一個選擇器才會勝出。
:activ將勝出，正在點選”未訪問 連結可以與其中3個規則匹配 :link:hover:activ所以依照上面的宣告順序。這可能就是所期望的
假設我忽略這種常用的順序，而是按字母順序排列連結樣式。宣告樣式如下:
:activ{color:orange;} :hover{color:red;} :link{color:blue;} :visit{color:purple;}
按照這種順序，任何連結都不會顯示 :hover 或者 :active，因為 :link 和 :visited 規則後出現。所有連結都必須要麼是已訪問（:visited），要麼是未訪問（:link），所以 :link 和 :visited 樣式總是會覆蓋 :hover 或者 :active。
比方 link-hover-visited-act這樣的一個順序，當然連結樣式也可以根據自己的實際需要設定某一種順序。起到效果是隻有未訪問的連結會有懸停樣式，已訪問的連結沒有懸停樣式。
由於可以把偽類連結起來，最後。所以可以不必擔心這些問題。以下規則可以任何順序列出，而不必擔心有什麼負面影響：
:link{color:blue;} :visit{color:purple;} :link:hov{color:red;} :visited:hov{color:gray;} :link:act{color:orange;} :visited:act{color:silver;}
結語
希望協助大家能加深瞭解CSS確定應當向一個元素應用哪些樣式時的一些基本原理。通過對連結樣式順序為什麼是link-visited-hover-act解答。
文章來自：http://blog.sdxseo.com/cssbiji/2018080667.html