a:link/a:visited 為什麼優先順序比class高？

查看示例： http://jsbin.com/iRiFUbu/1/

在Chrome(30.0.1599.69)，IE 10，Firefox 25.0上

見到鏈接是紅色(a:link)而不是黃色(.test)

想請問，為什麼？請問w3c標準是怎麼說明的？如果可能請列出w3c的標準說明網址。

參考：

Assigning property values, Cascading, and Inheritance

Selectors Level 3

---

瀉藥。

規範中已經寫的很清楚：

• count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)

計算選擇器裡面的class選擇器，屬性選擇器，偽類選擇器的個數(=b)

在 Selectors Level 3 規範中，一個選擇器的優先順序（權重）由依次串聯的a、b、c三個標記來計算，

其中：

1. ID選擇器「如：#header」的個數（=a）

2. Class選擇器「如：.foo」、屬性選擇器「如：[class]」、偽類「如：:link」的個數（=b）

3. 標籤選擇器「如：h1」、偽元素「如：:after」的個數(=c)

4. 忽略「*」選擇器

5. 雖然偽類(如:hover)參與CSS優先順序的計算，但是「:not」不參與計算。

6. HTML style 屬性內的優先順序在CSS2.1中有描述（實際在瀏覽器的實現中它不直接參与優先順序的計算）
   Assigning property values, Cascading, and Inheritance

只要一個選擇器的 a&>0，b=0，即使另外一個選擇的a=0, b=161，那麼前者的權重依然更大。

例1：

a:link{
color: red; /* 優先順序:a=0,b=1,c=1 */
}

.test{
color: yellow; /* 優先順序:a=0,b=1,c=0 */
}


他們的權重（優先順序）b是相等的，但是c標記中，前者大於後者，所以最終「a:link」生效顯示為紅色。

例2：

div[class].main a{
color:red; /* 優先順序:a=0,b=2,c=2 */
}

body div a[href]{
color:blue;/* 優先順序:a=0,b=1,c=3 */
}


由於屬性選擇器和class選擇器都計算在b標記中，所以前者b=2&>後者b=1，最終顯示為紅色。

切記，不要把權重簡單的作為10進位數字比較其大小。

練習題：

請問以下代碼最終顯示為什麼顏色，優先順序分別是多少？

擴展閱讀：

• KB005: CSS 層疊

• WebKit 與 Firefox 採用單一 int 值類型替代 CSS Selector"s Specificity 分段記值方式的潛在問題

• 有趣：256個class選擇器可以幹掉1個id選擇器 ? 張鑫旭

• 有趣的討論：http://weibo.com/1621464661/eAWpZnTpDWS?type=repost#_rnd1381321567348
• IE6-10，Firefox，Webkit 中，256個Class權重比ID高（Chrome 24修復）
  Demo：http://jsbin.com/UZiLela/3/edit ，http://jsbin.com/ixidec/1/edit
  WebKit bug 已修復：CSSSelector.cpp in trunk/WebCore/css
  Opera 採用16位存儲，所以超過65536個也會撐大。
• http://lists.w3.org/Archives/Public/www-style/2012Aug/0462.html

以上

一絲

---

感謝邀請，對於這個研究不深，菜鳥的回答是這樣的：

:link / :visited 是一個偽類，偽類也算是一個「類」，那麼跟.test是同級了，再加上一個a元素，肯定會比.test這個類要高了。

那麼如果把a去掉，直接就是:link的話，因為.test是在:link後寫的，就覆蓋了紅色，變成黃色。

:link{
color: red;
}
.test{
color: yellow;
}


你在demo中寫的是

a:link{
color: red;
}
.test{
color: yellow;
}


我想這個區別應該就有了。

或者我們可以這樣測試一下：

.test{
color: yellow;
}
:link{
color: red;
}


看到的效果跟你寫的a:link是一樣的，因為:link覆蓋了.test的樣式。

不知道這個答案是否正確，如果正確的話，請支持哈。謝謝！HOHO~~~

---

屬性選擇器，偽類選擇器和class類選擇器優先順序一樣

---

推薦閱讀：