CSS選擇順序

我很困惑，如何在性能和Web標準CSS選擇順序

條件假設我的HTML標記正確聲明CSS選擇器是

<div class="itemList"> 
    <div class="itemList-img-wrapper"> 
     <img class="item-img" src="reref.jpg" /> 
    </div> 
    <div class="bottom"> 
      <div class="info"> <h2>Data is invalid</h2> </div> 
    </div> 
</div>

有各種聲明css來設計這個網站的

如果我想設計.item-IMG我可以在兩個變化
一個這樣做的：

.itemList .itemList-img-wrapper .item-img { width:100%; }

或B：

.item-img { width:100%; }

有人告訴我，一個變化是優選的，因爲它使得它獨特的，因此，如果我使用的類.item-IMG在CSS文件別處時， CSS將不會被應用。哪一個在標準和性能方面更受歡迎？如果我想確保其特定的頁面，我應該在網頁的正文中添加一個ID標籤，並宣佈將CSS作爲假設有listings.php

#listings .item-img

或

#listings .itemList .itemList-img-wrapper .item-img

一頁

來源

2013-03-23 meWantToLearn

可以做空使用該DIV ID標籤將使其獨特的沒有別的＃項目-IMG {...} – 2013-03-23 20:23:29

的一類，因爲可以有多個itemList中 – meWantToLearn 2013-03-23 20:24:55

如何嘗試爲包含所有這些類的容器設置一個ID，並將它用在你的css引用中，就像你說的#listings .item-img – 2013-03-23 20:27:53

B的性能比A稍高，但實際上它並不相關：兩者都是FAST。還有無數的其他改進領域（少了圖片和文件的下載，其他域名的DL，JS的重量，CSS和圖片，JS中的選擇器等）。 CSS選擇器在性能優先級上接近最後（HTML代碼中的空格和註釋最後是imo）

就我所知，應該使用選擇器B.但是，如果沒有其餘頁面，很難回答。這個班有什麼其他用途？它會在其他地方重用嗎？怎麼樣？
爲什麼你有一個名爲列表和類的項目，但它不是一個ul元素？爲什麼你在img上添加「-img」到一個類的名字？ img.item也可以爲你工作，或者簡單地.someParent img？等

我很困惑，如何在性能和Web標準方面正確聲明CSS選擇

有沒有網絡的標準，告訴你選擇器，你應該使用;）這是關於代碼質量，公約在你的團隊或與你的客戶或個人喜好，在項目層面思考（這是困難的，需要經驗和客戶給予足夠的PSDs。定期我要命名與2 PSD的類，然後來20其他^^）

來源

2013-03-23 20:30:25 FelipeAls

案例A：

 .itemList .itemList-img-wrapper .item-img { width:100%; }

這將需要更多時間來渲染。

案例B：

.item-img { width:100%; }

這是短期和簡單。 IT將以「item-img」爲目標。如果你使用同一個類來達到不同的目的，那麼你可以增加元素的特異性。您可以通過

.itemList .item-img { width:100%; }

來源

2016-09-22 07:43:37

回答

相關問題