css - 在 css 的帮助下缩进生成的 html div 类

Question

我正在用 rails 编写一个应用程序。 我对 css 还不是很熟悉。虽然，我正在尝试。还有一个问题，我生成的html标签是

<div class="sub-product post-1">
 // content goes here
</div>

<div class="sub-product post-2">
 // content goes here
</div>

<div class="sub-product post-3">
 // content goes here
</div>

<div class="sub-product post-4">
 // content goes here
</div>

现在，如您所见，有不同的数字排列到 post。我想做的是让他们缩进，这是我的 CSS

.sub-product.post-1 {
margin:30px
}

它有效，但如果我将其设为 .sub-product.post-1.post-2.post-3.post-4，它会显示缩进。我想我知道这里出了什么问题，但显示缩进的优雅解决方案是什么？

谢谢

Answer 1

您可以嵌套您的 post-* div 以更清楚地表明它们具有父子关系(至少这是我根据您的帖子假设的):

<div class="sub-product post-1">
// content goes here
    <div class="sub-product post-2">
    // content goes here
        <div class="sub-product post-3">
        // content goes here
           <div class="sub-product post-4">
               // content goes here
           </div>
        </div>
    </div>
</div>

这样你只需要下面的CSS:

.sub-product[class^=post-] { // class starts with post-
    margin-left: 30px;
}