元素特定的CSS選擇器是否壞？

Question

是p.error比.error更好還是更差？

我已經讀過，特定於元素的選擇器是壞的，應該只在真正需要的時候使用，但沒有人似乎知道爲什麼。我的意思是我明白.error更適合重複使用代碼，但是有沒有一些特定的原因，爲什麼我不應該總是使用元素來處理類？

Answer 1

.error比p.error更有效。

要理解爲什麼這樣更有效，我建議您在css技巧處閱讀this article。

Answer 2

CSS選擇器從右向左讀取。所以p.error有一個額外的步驟.error。這可能會導致一個較小的集合 - 取決於您的標記。

但是，這是一個微觀微觀優化。除非我們談論大量的選擇器，否則不會有性能問題。

這裏有一個關於CSS選擇一個偉大的文章，關於他們是如何評價闡述：http://css-tricks.com/efficiently-rendering-css/

Answer 3

作爲一般的經驗法則，瀏覽器必須評估的選擇器越少越好。

p.error不一定比.error「差」，如果.error用於多個標籤。例如div.error（請參閱底部的腳註）。

但是，如果它只有一個段落使用，無論如何，然後有p.error只是使瀏覽器更加努力地工作，即

首先，它必須找到class屬性error所有元素，然後通過只具有標籤過濾這些那是p。

以下是Google的Page Speed站點上Optimize browser rendering的一些有趣閱讀。

---

腳註

不過，如果你需要使用一個類上的多個標籤，它可能是最好只把其中適用於這些標籤，而不是試圖分開它的CSS樣式。例如

.error 
{ 
    color:red; 
} 

h1 
{ 
font-size:2em; 
} 

p 
{ 
    font-size:0.8em; 
} 


<h1 class="error">Bad Heading!</h1> 
<p class="error">bad!</p> 

因此，這種類型打敗了無論如何都需要帶標籤前綴的類。

我希望這有助於！

Answer 4

沒有它不壞，但它並不總是必要的

工具，如谷歌的的PageSpeed和YSlow的！指的是這些類型的選擇器「超過限定」，也許這就是你聽到「很糟糕」部分的地方 - reading material

以p#myid爲例 - 一個ID在頁面上始終應該是唯一的，因此，根本不需要用p元素來限定它。在計算特異性時，ID已經具有最高的權重，因此再次添加額外的部分以嘗試並添加更多特定性是完全多餘的。

與類的名字，如你的榜樣

但是它有時確實需要加入的資格，你可能希望類是可重複使用在不同類型的元素，但必須取決於它是否是一個div或p不同屬性例如，「修飾詞」然後使選擇器稍微更具體

.error {background: red; margin: 5px;} 
p.error {margin: 2px;} 

上面的代碼意味着可以使用任何元件上的error類，它會具有5頁像素邊距然而如果設置了錯誤類p元件上第二個選擇器實際上是在做一些事情，它已經超越了第一個利潤率，但仍然在進步背景顏色

所以他們做了工作，但往往你看到太多的人在他們的排位賽的所有元素時，它是沒有必要的。例如，如果你永遠只能應用該.error類的p元素，則你不需要第二個選擇器。

經驗法則是讓選擇器儘可能快地從右側開始唯一。

Answer 5

原因是特異性。例如...

• +1由每級接入
• +1每個接入按標籤
• +10通過ID
• 等每個接入

所以，如果你有一個類和一個標記訪問權限，該樣式具有2（1 + 1）的特異性。以後，如果您嘗試對所有元素進行樣式設置，但是您在元素中存在衝突風格，則特徵越高，勝利性越高。這可能會導致一些麻煩。這就是爲什麼你可能不想總是使用標籤+類。

（話雖這麼說，特異性解決更多的問題比它創建，並且被普遍認爲是相當真棒。）

Answer 6

有一個非常具體的選擇不會達到不錯的表現，但如果有很多適用於某個元素的聲明，則表現會受到影響。唯一的問題是它增加了否。要加載樣式表的字節。相信我，HTML中傳遞的每個額外字符都是邪惡的，並且會降低頁面加載速度。

在CSS層疊由現代瀏覽器的應用，下面是發生的每個CSS屬性的每個網頁元素的過程：

1. 收集的財產所有聲明從所有源。這包括默認瀏覽器樣式和自定義用戶樣式，以及作者樣式表。如果有多個，請繼續執行2。

2. 排序以下列順序的聲明由重要性和原點（從最低到最高優先級）：

   • 用戶代理樣式表（默認瀏覽器樣式）
   • 正常聲明在用戶樣式表（用戶的自定義樣式表）在作者樣式表
   • 正常聲明（網頁樣式表;！外，嵌入式和內聯樣式）
   • 在作者樣式表中的重要聲明
   • ！用戶樣式表中的重要聲明

   具有最高優先級的那個獲勝。如果不止一個具有相同的優先級，則繼續執行3.

3. 按選擇器的特異性排序。具有最具體選擇器的那個勝者。如果沒有明確的獲勝者，請執行4.

4. 來源中最後一個獲勝！

如果級聯不會設置元素的CSS屬性，那麼瀏覽器就會回落到利用元素的父（這只是發生了一些屬性）的繼承屬性，否則該屬性設置爲CSS默認值。

根據上述過程，如果您使用了許多更具體的選擇器，則會在至少3級深度後作出選擇。因此，更多的沒有。可能適用於元素的聲明，性能會越低。

所以，您必須具體說明它是否有意義。