了解CSS分组/嵌套
了解CSS分组/嵌套
提问于 2013-01-03 08:53:56
我知道类似的问题已经被问了很多次了，但我找不到一个具体的答案。如果我有一堆非常相似但只是不同的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;
}正如你所看到的，所有的单元格都是彼此通用的，只是它们的边距略有不同。我知道有一种方法可以做所有的单元格完全相同，然后添加一个.right，.center和.left，在CSS中只有空白处，并减少了许多代码。
提前感谢你的回答。
回答 5
Stack Overflow用户
回答已采纳
发布于 2013-01-03 08:57:52
创建一个包含重复属性的单元格类，并将其添加到每个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/
Stack Overflow用户
发布于 2013-01-03 09:05:30
如果你只有一个左，中，右的单元格，那么你就可以使用id。
否则请使用类，因为id-s 必须是唯一的，并且页面上不能有两个具有相同id的。
这是你的CSS的简写版本。由于您的类-s是某种子类(假设它们是<td>-s of a <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个这样的类，你就不必使用类来定义left和right：
tr.row td:first-child {
margin:20px 10px 0px 32px; /* left cell */
}
tr.row td:last-child {
margin:20px 32px 0px 20px; /* right cell */
}而超文本标记语言将是
<tr class="row">
<td> left cell </td>
<td> center cell </td>
<td> right cell </td>
</tr>Stack Overflow用户
发布于 2013-01-03 09:01:43
我建议你使用class，这是对你想要的东西进行分组的唯一方法。顺便说一下，我猜你会有几个相同的单元格和几行的页面，对吗？
(我猜你知道这一点，但以防万一:在同一个页面上使用两个相同的id是非常糟糕的做法。类应该在同一个页面上多次使用。而ids只能在每个页面上使用一次。
您可以这样做：
.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>您可以链接类
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14131607
复制相关文章
相似问题
腾讯云开发者
