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 -s 必须是唯一的，并且您不能拥有两个具有相同 id <的元素/ em>在页面上。

这是缩短版的CSS。由于您的cell - s是某种类型的孩子（我们假设它们是<td> - <tr>的{{1}}类 - 您不必使用类。这将使您的标记更清洁：

.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; }中有3个，则不必使用类来定义左右：

row

HTML 将是

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

DEMO

Answer 3

我建议您使用课程，这是将您想要的内容分组的唯一方法。顺便说一句，我猜你会有一些页面有几个相同的单元格和几行，对吗？

（我想你知道的，但是以防万一：在同一个页面上使用两次相同的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 4

CSS不支持分组或嵌套。现在，一些CSS 编译器（例如LESS，SASS）支持这样的概念以及“mixins”和其他巧妙的技巧..

..但是，请记住应用所有匹配的CSS规则。选择器特异性和声明顺序仅决定哪些值覆盖其他值。所以，没有课程或其他hullabaloo：

#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;     
}

现在，虽然使用类或更清晰的标记可能是有益的 - 特别是如果这样做会导致更容易维护 - 上面将获得与初始帖子相同的结果。 YMMV。

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>

了解CSS分组/嵌套

5 个答案: