這個更概念性的問題。最近我發現自己是這個類型的HTML（例如）直接使用css選擇器或更多id？

<div id="mainCont"> 
    <div id="mainContFirst">Text <span id="mainContFirstSpan">option</span></div> 
    <div id="mainContSecond">Other Text</div> 
</div>

有標有ID的所有重要的標記更加自信，你可以伊斯利寫下CSS：

#mainContFirst {} etc

這是一個糟糕的初步實踐？我應該只使用CSS選擇器？這是更快，然後使用選擇器？

感謝

分組（編輯）

好了，現在應該有什麼內容相同的風格？

讓我們說，例如在每一個div的第二<span>應該有font-size:10px;這是更好的：

<div> 
    text text <span></span> <span id="firstDivSpan"></span> 
</div> 
<div> 
    text text <span></span> <span id="secondDivSpan"></span> 
</div>

，然後CSS：

#firstDivSpan, #secondDivSpan {...}

還是這樣嗎？

<div> 
    text text <span></span> <span id="firstDivSpan" class="commonStyle"></span> 
</div> 
<div> 
    text text <span></span> <span id="secondDivSpan" class="commonStyle"></span> 
</div> 

.commonStyle{...}

有什麼更好？

來源

2011-03-22 dynamic

咦？ ID選擇器是一個選擇器，不是嗎？ – BoltClock 2011-03-22 15:31:46

ID選擇器是最快的。這根本不是壞習慣;你只是在假設頁面上只有一個帶有該ID的元素的情況下運行。

這就是說你不應該濫用ID來表現蹩腳的表現。使用ID來標記真正獨特的元素，而不是標記所有的東西，這樣你就可以忘記像後代組合器，類，組等那樣的東西。這些其他選擇器使CSS變得如此強大，而不僅僅是ID選擇器。

重新編輯問題：沒有任何更好在這種情況下。除了性能問題（因爲他們根本就不重要）它很大程度上取決於選擇器的含義。

如果您的樣式適用於.commonStyle類的任何元素，請使用類選擇器。如果您只想定位這兩個特定的span，而不考慮該類，那麼ID選擇器更合適。

來源

2011-03-22 15:32:17 BoltClock

謝謝！我編輯了一下我的問題看看:) – dynamic 2011-03-22 18:31:24

@ yes123：看看我的答案是否有幫助。 – BoltClock 2011-03-22 18:40:07

+1讓我們等待其他意見，然後我選擇答案 – dynamic 2011-03-22 19:42:30

最好在你的例子中使用ID。更容易爲瀏覽器請求一個ID元素，而不是必須要找到所有的父母，然後子孫......

正如有人在一個單獨的線程擴展我的答案，文章對此：http://www.css-101.org/descendant-selector/go_fetch_yourself.php

ID，類，元素名稱 - 它們都是CSS選擇器。

來源

2011-03-22 15:31:31

直接使用css選擇器或更多id？

分組（編輯）

回答

相關問題