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