blocks|key|917728|text|创建一个包含重复属性的单元格类，并将其添加到每个DOM元素中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|917729|CSS|offset|length|style|BOLD|917730|.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;
+}|code-block|syntax|javascript|917731|HTML|917732|<div+id="cell-left"+class="cell">Something</div>
<div+id="cell-right"+class="cell">Something</div>
<div+id="cell-center"+class="cell">Something</div>|917733|示例：http://jsfiddle.net/hKLMj/|917734|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/hKLMj/^0|0|0|3|0|0|0|4|0|0|3|Q|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|15|8|@$D|16|E|17|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|S|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>Create a cell class which contains the duplicate properties and add it to each of the DOM elements.</p>

<p><strong>CSS</strong></p>

<pre><code>.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;
 }
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="cell-left" class="cell"&gt;Something&lt;/div&gt;
&lt;div id="cell-right" class="cell"&gt;Something&lt;/div&gt;
&lt;div id="cell-center" class="cell"&gt;Something&lt;/div&gt;
</code></pre>

<p>Example: <a href="http://jsfiddle.net/hKLMj/" rel="nofollow">http://jsfiddle.net/hKLMj/</a></p>


blocks|key|917804|text|我建议你使用class，这是对你想要的东西进行分组的唯一方法。顺便说一下，我猜你会有几个相同的单元格和几行的页面，对吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|917805|(我猜你知道这一点，但以防万一:在同一个页面上使用两个相同的id是非常糟糕的做法。类应该在同一个页面上多次使用。而ids只能在每个页面上使用一次。|917806|您可以这样做：|917807|.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%25;
+margin-top:0px;
}|code-block|syntax|javascript|917808|在你的HTML中，你可以这样做|917809|<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>|917810|您可以链接类|917811|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>I suggest you use class, it is the only way to group what you want. By the way, I guess you will have some pages with several identical cells and several rows, right ?</p>

<p>(I guess you know that, but in case : It is very bad practice to use twice a same id on a same page. Classes are meant to be used several times on a same page. And ids are meant to be used only once/page.</p>

<p>You can do this :</p>

<pre><code>.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;
}
</code></pre>

<p>And in you HTML you do this</p>

<pre><code>&lt;table border="1"&gt;
    &lt;tr class="row"&gt;
        &lt;td class="cell cell-left"&gt;row 1, cell 1&lt;/td&gt;
        &lt;td class="cell cell-right"&gt;row 1, cell 2&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="row"&gt;
        &lt;td class="cell cell-left"&gt;row 2, cell 1&lt;/td&gt;
        &lt;td class="cell cell-right"&gt;row 2, cell 2&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>You can chain classes</p>


blocks|key|917819|text|如果你只有一个左，中，右的单元格，那么你就可以使用id。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|917820|否则请使用类，因为id-s+必须是唯一的，并且页面上不能有两个具有相同id的。|offset|length|style|BOLD|917821|这是你的CSS的简写版本。由于您的类-s是某种子类(假设它们是<td>-s+of+a+<tr>，具有.row类)-您不必使用类。这将使您的标记更清晰：|CODE|917822|tr.row+td+{
+++background-color:+#ddd;+
+++border:+2px+solid;
+++height:+400px;
+++padding:+40px+15px+15px+15px;
+++text-align:center;+
+++margin:20px+10px+0px+10px;
}|code-block|syntax|javascript|917823|另外，如果在一个row中有3个这样的类，你就不必使用类来定义left和right：|917824|tr.row+td:first-child+{
++++margin:20px+10px+0px+32px;+/*+left+cell+*/
}

tr.row+td:last-child+{
++++margin:20px+32px+0px+20px;+/*+right+cell+*/
}|917825|而超文本标记语言将是|917826|<tr+class="row">
++++<td>+left+cell+</td>
++++<td>+center+cell+</td>
++++<td>+right+cell+</td>
</tr>|917827|917828|entityMap^0|0|E|O|0|V|4|17|4|1E|4|0|0|8|3|0|0|1|7|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|14|8|@$D|15|E|16|F|J]|$D|17|E|18|F|J]|$D|19|E|1A|F|J]]|9|@]|A|$]]|$1|K|3|L|5|M|7|1B|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|1C|8|@$D|1D|E|1E|F|J]]|9|@]|A|$]]|$1|R|3|S|5|M|7|1F|8|@]|9|@]|A|$N|O]]|$1|T|3|U|5|6|7|1G|8|@$D|1H|E|1I|F|G]]|9|@]|A|$]]|$1|V|3|W|5|M|7|1J|8|@]|9|@]|A|$N|O]]|$1|X|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|Z|$]]

<p>If you have just <strong>one</strong> left, center and right cell then you are fine with the <em>id</em>.</p>

<p>Otherwise use <em>classes</em>, since <em>id</em>-s <strong>must</strong> be unique and you can't have two elementswith the same <em>id</em> on the page.</p>

<p>And here is the shortened version of your CSS. Since your <code>cell</code>-s are some kind of children (let's assume they're <code>&lt;td&gt;</code>-s of a <code>&lt;tr&gt;</code> with class <code>.row</code>) - you don't have to use classes. This will make your markup cleaner:</p>

<pre><code>tr.row td {
   background-color: #ddd; 
   border: 2px solid;
   height: 400px;
   padding: 40px 15px 15px 15px;
   text-align:center; 
   margin:20px 10px 0px 10px;
}
</code></pre>

<p>also if there are 3 of them in a <code>row</code> you don't have to use classes for defining left and right:</p>

<pre><code>tr.row td:first-child {
    margin:20px 10px 0px 32px; /* left cell */
}

tr.row td:last-child {
    margin:20px 32px 0px 20px; /* right cell */
}
</code></pre>

<p>And the <strong><em>HTML</em></strong> will be</p>

<pre><code>&lt;tr class="row"&gt;
    &lt;td&gt; left cell &lt;/td&gt;
    &lt;td&gt; center cell &lt;/td&gt;
    &lt;td&gt; right cell &lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p><a href="http://jsfiddle.net/bn749/" rel="nofollow"><strong>DEMO</strong></a></p>


blocks|key|223850|text|CSS不支持分组或嵌套。现在，一些CSS编译器(例如LESS，SASS)支持这样的概念以及“混合”和其他巧妙的技巧。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|223851|。。但是，请记住，将应用所有匹配的CSS规则。选择器的特异性和声明的顺序只决定哪些值覆盖其他值。所以，没有类或者其他的hullabaloo：|223852|#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%25;
++++margin-top:0px;+++++
}|code-block|syntax|javascript|223853|现在，虽然使用类或更干净的标记可能是有益的--特别是如果这样做会使维护更容易--但上述方法将达到与最初的post相同的结果。YMMV.|223854|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>CSS does not support grouping or nesting. Now, some CSS <em>compilers</em> (e.g. LESS, SASS) support such concepts as well as "mixins" and other neat tricks ..</p>

<p>.. however, remember that <em>all</em> matching CSS rules are applied. The selector specificity and order of declaration only decide which values override others. So, without classes or other hullabaloo:</p>

<pre><code>#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;     
}
</code></pre>

<p>Now, while it might be beneficial to use classes or a cleaner markup - especially if doing so leads to easier maintenance - the above will achieve the same result as the initial post. YMMV.</p>


blocks|key|223497|text|使用double+class+selectors在语义上更正确|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|223498|.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;
}|code-block|syntax|javascript|223499|这样你就能写出：|223500|<div+class="cell+left">Something</div>
<div+class="cell+center">Something</div>
<div+class="cell+right">Something</div>|223501|或者甚至是：|223502|<div+class="left+cell">Something</div>
<div+class="center+cell">Something</div>
<div+class="right+cell">Something</div>|223503|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/multiple-class-id-selectors/#article-header-id-2^0|2|M|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|C|$]]|$1|O|3|P|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

<p>It will be more semantically correct to use <a href="https://css-tricks.com/multiple-class-id-selectors/#article-header-id-2" rel="nofollow">double class selectors</a>:</p>

<pre><code>.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;
}
</code></pre>

<p>This way you will be able to write:</p>

<pre><code>&lt;div class="cell left"&gt;Something&lt;/div&gt;
&lt;div class="cell center"&gt;Something&lt;/div&gt;
&lt;div class="cell right"&gt;Something&lt;/div&gt;
</code></pre>

<p>Or even:</p>

<pre><code>&lt;div class="left cell"&gt;Something&lt;/div&gt;
&lt;div class="center cell"&gt;Something&lt;/div&gt;
&lt;div class="right cell"&gt;Something&lt;/div&gt;
</code></pre>


<p>I know similar questions to this have been asked a bunch of times but I could not find an answer for my specific one. If I have a bunch of CSS selectors that are very similar but are only just different how can I nest or group them. </p>

<p>Here is what I am trying to do.</p>

<pre><code> #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;
 }
</code></pre>

<p>As you can see all the cells are very common to each other they just have slightly different margins. I know there is a way to do all the cells the exact same then add a .right, .center and .left with just margin in the CSS and cut down on a lot of code. </p>

<p>Thanks in advance for the answer. </p>


Understanding CSS Grouping/ Nesting

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我知道类似的问题已经被问了很多次了，但我找不到一个具体的答案。如果我有一堆非常相似但只是不同的CSS选择器，我如何嵌套或分组它们。这就是我想要做的。 #cell-left {  background-color:#DDDDDD;     border:2px solid;    height:400px;    mar...

问了解CSS分组/嵌套
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问了解CSS分组/嵌套EN