瞭解CSS分組/嵌套

Question

我知道類似的問題已經問了一堆，但我無法找到我的具體答案。如果我有一堆CSS選擇器非常相似，但只是不同，我可以如何嵌套或分組它們。

這是我正在做的。

#cell-left { 
    background-color:#DDDDDD; 
    border:2px solid; 
    height:400px; 
    margin:20px 10px 0px 32px; 
    padding: 40px 15px 15px 15px; 
    text-align:center; 
} 
#cell-center { 
    background-color:#DDDDDD; 
    border:2px solid; 
    height:400px; 
    margin:20px 10px 0px 10px; 
    padding: 40px 15px 15px 15px; 
    text-align:center; 
} 
#cell-right { 
    background-color:#DDDDDD; 
    border:2px solid; 
    height:400px; 
    margin:20px 32px 0px 20px; 
    padding: 40px 15px 15px 15px; 
    text-align:center; 
} 
#row { 
    width:100%; 
    margin-top:0px; 
} 

正如你可以看到所有的單元格對彼此非常普遍，他們只是略有不同的利潤率。我知道有一種方法可以將所有單元格完全相同，然後在CSS中添加一個.right，.center和.left，只需保留邊緣，並減少大量代碼。

在此先感謝您的答案。

Answer 1

創建一個包含重複屬性並將其添加到每個DOM元素的單元類。

CSS

.cell{ 
    background-color:#DDDDDD; 
    border:2px solid; 
    height:400px; 
    padding: 40px 15px 15px 15px; 
    text-align:center; 
} 

#cell-left{ 
    margin:20px 10px 0px 32px; 
} 

#cell-center { 
    margin:20px 10px 0px 10px; 
} 

#cell-right { 
    margin:20px 32px 0px 20px; 
} 

HTML

<div id="cell-left" class="cell">Something</div> 
<div id="cell-right" class="cell">Something</div> 
<div id="cell-center" class="cell">Something</div> 

例子：http://jsfiddle.net/hKLMj/

Answer 2

我建議你使用類，它是集團唯一的出路，你想要什麼。順便說一句，我想你會有幾個相同的單元格和幾行的頁面，對不對？我認爲你知道，但在以下情況下：在同一個頁面上使用兩次相同的id是非常糟糕的做法，類應該在同一頁面上多次使用，並且id應該是。只能使用一次/頁

你可以這樣做：

.cell { 
    background-color:#DDDDDD; 
    border:2px solid; 
    height:400px; 
    padding: 40px 15px 15px 15px; 
    text-align:center; 
} 
.cell-left { 
    margin:20px 10px 0px 32px; 
} 
.cell-center { 
    margin:20px 10px 0px 10px; 
} 
.cell-right { 
    margin:20px 32px 0px 20px; 
} 
.row { 
width:100%; 
margin-top:0px; 
} 

而且在你HTML這樣做

<table border="1"> 
    <tr class="row"> 
     <td class="cell cell-left">row 1, cell 1</td> 
     <td class="cell cell-right">row 1, cell 2</td> 
    </tr> 
    <tr class="row"> 
     <td class="cell cell-left">row 2, cell 1</td> 
     <td class="cell cell-right">row 2, cell 2</td> 
    </tr> 
</table> 

你可以連續類

Answer 3

如果你只有一個左，中間和右邊的單元格，那麼你很好，ID。

否則使用類，因爲ID -s 必須是唯一的，你不能有兩個elementswith頁面上的相同ID。

這裏是你的CSS的縮短版本。由於你的cell-s是某種孩子（讓我們假設他們是<td>-<tr>與.row類） - 你不必使用類。這將使您的標記清潔：

tr.row td { 
    background-color: #ddd; 
    border: 2px solid; 
    height: 400px; 
    padding: 40px 15px 15px 15px; 
    text-align:center; 
    margin:20px 10px 0px 10px; 
} 

還，如果有一個row其中的3個，你不必使用類定義左，右：

tr.row td:first-child { 
    margin:20px 10px 0px 32px; /* left cell */ 
} 

tr.row td:last-child { 
    margin:20px 32px 0px 20px; /* right cell */ 
} 

而且HTML將

<tr class="row"> 
    <td> left cell </td> 
    <td> center cell </td> 
    <td> right cell </td> 
</tr> 

DEMO

Answer 4

CSS不支持分組或嵌套。現在，一些CSS 編譯器（例如LESS，SASS）支持這樣的概念，以及「混入」等巧妙的技巧..

。但是，請記住，所有匹配 CSS規則。選擇器的特定性和聲明的順序只決定哪些值覆蓋其他值。所以，沒有類或其他大喊大叫：

#cell-left, #cell-center, #cell-right, #row { 
    background-color:#DDDDDD; 
    border:2px solid; 
    height:400px; 
    padding: 40px 15px 15px 15px; 
} 
#cell-left, #cell-center, #cell-right { 
    text-align: center; 
} 

#cell-left { 
    margin:20px 10px 0px 32px; 
} 
#cell-center { 
    margin:20px 10px 0px 10px; 
} 
#cell-right { 
    margin:20px 32px 0px 20px; 
} 
#row { 
    width:100%; 
    margin-top:0px;  
} 

現在，雖然它可能是有益的使用類或清潔的標記 - 特別是如果這樣做會導致更容易維護 - 上面將獲得相同的結果作爲初始崗位。因人而異。

Answer 5

這將是更語義正確使用double class selectors：

.cell { 
    background-color: #DDDDDD; 
    border: 2px solid; 
    height: 400px; 
    padding: 40px 15px 15px 15px; 
    text-align: center; 
} 
.cell.left { 
    margin: 20px 10px 0px 32px; 
} 
.cell.center { 
    margin: 20px 10px 0px 10px; 
} 
.cell.right { 
    margin: 20px 32px 0px 20px; 
} 

這樣，你就可以這樣寫：

<div class="cell left">Something</div> 
<div class="cell center">Something</div> 
<div class="cell right">Something</div> 

甚至：

<div class="left cell">Something</div> 
<div class="center cell">Something</div> 
<div class="right cell">Something</div>