我想知道哪個選擇器是更好的練習，爲什麼？哪個CSS選擇器更好？
HTML代碼示例
<div class="main">
<div class="category">
<div class="product">
</div>
</div>
</div>
，我們希望用CSS選擇器來達到.product：
.product.main .category .productdiv.main div.category div.product我比較它們以下標準：
我們可以假設.product是整個網頁唯一的。我們可以使用id而不是class，但在這種情況下，我們選擇了class屬性。
我們可以假設
.product是整個網頁唯一的。
性能方面的最好當然會一直ID選擇，但由於您使用的是類代替，.product會來第二次。
至於可維護性，可讀性和語義（有更多一點的表現，以及）...
.product意味着
找到具有類
product任何元素。
非常容易理解，幾乎相同的ID選擇器，如果您使用此基於上述假設。
我想使用一個類選擇器和在此情況下的ID選擇之間的唯一區別是一個ID選擇實施唯一該元件的，這不僅是因爲那裏只是發生是一個這樣的元素。換句話說，ID選擇器的作用是知道文檔只有一個這樣的獨特元素，而類選擇器不具有這樣的特性。
.main .category .product裝置
找到具有類
product
，其被包含在有一個類category
，其被包含在有一個類main任何元件的任何元件的任何元件。
瀏覽器的任務是檢查這些元素的祖先，如果您只有一個.product，這是多餘的。許多瀏覽器佈局引擎evaluate CSS selectors from right to left，類似於我如何將選擇器翻譯爲英文，如上所述。
div.main div.category div.product裝置
僅查找
<div>具有一個類product
，其被包含在僅<div>具有一個類category
，其被包含在僅<div>具有一個類元素的元素的元素main。
除了與檢查元素的層次結構，您希望瀏覽器只匹配類product一個div。如果你想匹配這個類的任何元素，那麼這個選擇器將不能按預期工作。
如果您確定只有該類的一個div，並且您只想匹配該元素，那麼您可以使用div.product來代替，但.product仍然表現更好。
如果有幫助，這裏是關於CSS選擇器層次結構的規範。 http://www.w3.org/TR/selectors/#specificity – ptpaterson 2010-12-16 07:46:24
我不是大師，但我至少可以發表評論。
我認爲第一種方式無疑是最好的：
所有三個選擇器都有不同的含義，應該根據需要在不同的地方使用。 性能上，第一個應該是最好的，因爲我們只需要一次訪問DOM。 可讀性也明智，第二和第三選擇器看起來很麻煩，未來可能難以擴展。
第一種方法.product是最好的也是最容易的。如果您使用.product，則無需瀏覽整個文件即可找到您要查找的內容。您也可以使用ID選擇器而不使用類。
我總是嘗試使用最小的選擇器，所以我只使用.product（即您的第一個示例）。我認爲這也具有性能優勢，因爲瀏覽器只需找到標有單個類的元素，而不是先嚐試找到匹配的父元素，然後檢查其是否具有標有該類的後代，等等。
唯一的原因，我一般都用你提到的其他方法是，如果：
.internal_link類下），但希望它們在特定環境中出現時也加下劃線。最後，如果你假設只有一個元素用.product類標記，那麼你最好使用它作爲ID而不是類。
.product.main .category .productdiv.main div.category div.product
使用上面的選擇都取決於你的網站是多麼複雜。
Ex。
如果所有這些元素僅使用一個。第一個選擇器可能合適。
第二種方法是最佳實踐，如果您將此用於多個頁面（例如，您有一組產品的這些元素）。
對我來說，第三個方法是不必要的，除非你有像跨度其他HTML標記這個類的名字..
更多提示：Mushu Tricks
我們在這個問題上達成共識，*因爲它目前無論如何，這是否是真的不值得回答。雖然我盡我所能提供了合理的分析，但您的問題本身仍然過於寬泛且無法確定（例如，這很可能取決於瀏覽器實現）。這就是爲什麼你的問題最初是由維基創建的;作爲下一步，我現在追溯性地關閉它。 – BoltClock 2012-01-19 23:12:08