html - 了解 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/