css可重用類的理解需要

我正在使用從骨架960響應佈局，我有他們的CSS樣式表，我必須插入，如果我想包括類。實驗後，我設法得到我想要的網站，但不是沒有成堆的不必要的選擇。css可重用類的理解需要

因此，例如，基於你看到我的CSS反映選擇器.container.four.columns，即如果我添加一個橫幅類，在我的CSS我應該只做.container.banner或.container.four .columns.banner將是最好的方法？

因爲我想如果我添加了很多可重用的風格的類到它的CSS選擇器將很長，如果我進入每個細節..請指教，因爲我試圖讓我的代碼看起來乾淨整潔可能但不確定最好的選擇器使用，因爲當我嘗試快捷方式就像.banner什麼也沒有發生，我必須至少有.container.banner才做出更改。由於

HTML：

<div id="content" class="container">         
      <div class="four columns banner"> 
       <div id="banner_a3da" class="banner_img"> 
       <a href="./page_a3da.html" rel="external"><img src="page_home/banner_A3DA.jpg"></a> 
       </div>     
      </div> 
      <div class="four columns banner"> 
       <div id="banner_fi" class="banner_img"> 
        <img src="page_home/banner_FI.jpg"> 
       </div> 
      </div> 
</div>

CSS：

/* Base Grid */ 
    .container .four.columns     { width: 220px; } 

.banner or .container.banner or .container.four.columns.banner { width:100% }

來源

2014-10-31 Devon

你可以閱讀關於** [特殊性在這裏]（https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity）**，這對你工作的方式可能很重要 – DaniP 2014-10-31 15:11:23

謝謝！爲技巧 – Devon 2014-10-31 15:29:21

那麼無論方式是正確的，但可以使用更多的類，你的情況來選擇特定的對象。但是也許你在.container.three.columns.banner中有一些.banner，例如50％，你希望它是50％，但使用.banner你會選擇他，你會調整它到100％。

要恢復，單選可能會影響一些您不想要的元素，因爲該類有更多元素。

來源

2014-10-31 15:12:20

我不知道，如果這只是僞CSS或什麼，但你做「或」用逗號,：

.banner, 
.container .banner, 
.container .four.columns.banner { 
    width:100% 
}

也.container後有缺失的空間。這有幫助嗎？

來源

2014-10-31 15:14:06 Victor

嗨，我不太確定何時使用空間或不..我做一個響應式網站就像在全屏幕上我可以調整img src的.container div.banner {寬度：50 ％}，然後在另一個媒體查詢時，當我做完全相同的事情，它將無法正常工作，我必須包括一個IMG結果 - .container div.banner img {width：50％}然後它會工作..你知道嗎爲什麼它適用於前者而不是後者？ – Devon 2014-11-02 15:42:00

@Devon，CSS選擇器中的空格表示「後代」。沒有空間意味着另一個選擇器適用於相同的元素。 – Victor 2014-11-03 10:03:40

css可重用類的理解需要

回答

相關問題