我應該爲所有事情添加一個類/標識，還是使用其他選擇器

我不確定選擇元素的最佳（最有效）方式是什麼。我應該爲所有事情添加一個類/標識，還是使用其他選擇器

可以說我有如下的佈局（非常簡單的例子）

<div id="navigation"> 
    <ul> 
    <li>Link 1</li> 
    <li>Link 2</li> 
    <li>Link 3</li> 
    </ul> 
</div>

我要選擇我的無序列表（保證我不會影響任何其他UL的在我的網站），我應該怎麼辦#navigation ul {}或爲UL分配一個類？
我想選擇我的列表項目，再次確保我只影響那些。我應該做navigation ul li{}還是分配班級？
最後，如果我想選擇我的第一個鏈接和樣式，我應該做#navigation ul li:first-child {}還是分配一個類？

我很欣賞這些問題幾乎相同，但我很好奇，什麼時候應該使用一個類，什麼時候不使用。

來源

2012-07-26 Andy

您的問題標題是......錯誤的。類和ID是選擇器，所以真的，最好是說「我應該爲所有事情添加一個類/ ID還是使用_other_選擇器」。我要編輯它。 – ScottS 2012-07-26 14:29:31

對於1,2和3 - 如果你的'navigation' div中有任何其他'ul'，你將如何區分它們？這是一個非常簡單的答案，只有你可以回答。這一切都取決於您的佈局/頁面上的項目。如果您可以使用class/id這樣做，那麼使您的引用項目的任務更加緊湊並且對其他人可讀。 – JonH 2012-07-26 14:14:27

這裏沒有硬性和快速的答案。

一般的經驗法則可能是要使用類，當你想將某些元素分組在一起，對待他們一樣，並使用類是唯一的手段。

在你的最後一個例子中，絕對不需要一個類。

但是，使用示例3中的類將導致更好的性能，因爲瀏覽器將更快地找到相關項目。與此相反，代碼易讀性略有下降。如果您在所有內容上都有類名，那麼讀取標記的其餘部分變得更加困難。

簡而言之，在你上面顯示的內容中，你寫的是很好的imo。

您應該閱讀this文章，它涵蓋了選擇器效率。

基本上效率的順序如下：

ID, e.g. #header 
Class, e.g. .promo 
Type, e.g. div 
Adjacent sibling, e.g. h2 + p 
Child, e.g. li > ul 
Descendant, e.g. ul a 
Universal, i.e. * 
Attribute, e.g. [type="text"] 
Pseudo-classes/-elements, e.g. a:hover

類和Id的之間的性能差異通常是不相關的。

儘管進一步下去，事情卻大大減緩。

這不是一個無處不在的添加類和id的參數 - 它只是允許您判斷性能和可維護性之間的權衡。

來源

2012-07-26 14:15:58 BonyT

+1，很好的答案。感謝您的鏈接。我知道的一些，但這是一個很好的討論。我唯一可能不同意的是'id'和'class'的無關性。我認爲如果在許多項目上使用'class'，那麼速度差異可能會更加明顯（圖片中的10000個項目帶有'class'集合，而對於唯一的'id'）。然而，誠然，這將是一個特殊的情況，你和文章中關於不相關的觀點在大多數情況下可能是正確的。 – ScottS 2012-07-26 14:46:16

是的 - 好點 - 我修改了我的答案;） – BonyT 2012-07-26 14:51:03

#id應該是唯一的，班級不應該。所以如果你需要添加一些JS - 你需要#id，如果你只是想風格不同的元素，.class是好的。

來源

2012-07-26 14:14:15 novus42

他並不是要求身份證和班級之間有什麼區別。 – JonH 2012-07-26 14:15:08

我認爲這實際上取決於#navigation元素下面的結構有多複雜。使用#navigation元素引用所有內容可能是可以的，如果它是一個簡單的結構，但是對於我來說如果它更復雜或者會有不同的ul，li元素需要不同的行爲，那麼我會id/class嵌套元素。

來源

2012-07-26 14:14:52

對於Javascript的使用，我認爲比使用native選擇器更快，並且沒有class或id。

有關更多詳細信息，我認爲只是用複雜的代碼（用於查看不同時間）測試此理論。

不要忘了javaScript的更快取決於您的瀏覽器。

對於CSS，好文章是here瞭解更多詳情。

來源

2012-07-26 14:22:22

我應該爲所有事情添加一個類/標識，還是使用其他選擇器

回答

相關問題