2

我知道类似的问题已经被问了很多次，但我找不到我的具体问题的答案。如果我有一堆非常相似但只是不同的 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 并只保留边距并减少大量代码。

提前感谢您的回答。

4

5 回答 5

2

创建一个包含重复属性的单元类并将其添加到每个 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/

于 2013-01-03T00:57:52.417 回答
2

如果您只有一个左、中和右单元格，那么您可以使用id。

否则使用classes，因为id -s必须是唯一的，并且页面上不能有两个具有相同id的元素。

这是您的 CSS 的缩短版本。由于您的cell-s 是某种孩子（假设它们是带有类的<td>-s ） - 您不必使用类。这将使您的标记更清晰：<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;
}

此外，如果 a 中有 3 个，row则不必使用类来定义左右：

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>

演示

于 2013-01-03T01:05:29.600 回答
1

我建议你使用类，这是对你想要的东西进行分组的唯一方法。顺便说一句，我猜你会有一些页面有几个相同的单元格和几行，对吧？

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

您可以链接类

于 2013-01-03T01:01:42.653 回答
0

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

.. 但是，请记住，所有匹配的 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;     
}

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

于 2013-01-03T01:12:44.103 回答
0

使用双类选择器在语义上会更正确：

.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>
于 2016-04-28T23:08:37.150 回答