html - 一个 div 中的两个类，最佳方法 - CSS

Question

我对使用 CSS 设置样式还是个新手。这是我的情况，我想要一种风格的三个元素。但是每一个都需要小的调整。所以我给每个元素都赋予了 plan-price 类，然后我给了他们每个元素一个独特的第二类。然后我试图将第二个类嵌套在第一个类中。但这种方法行不通。为了清楚起见，我将展示我的代码。

HTML

    <div class="price-plans private-eye">
        <p><a href="/account/sign_up?plan=little_birdy" class="button-big reverse-blue">Select</a></p>
    </div>

    <div class="price-plans little-birdy">
        <p><a href="/account/sign_up?plan=little_birdy" class="button-big reverse-blue">Select</a></p>
    </div>

CSS

 .plan-price {
    float: right;
    margin: 83px 20px 20px;

    .private-eye {
      margin: 40px;
    }

    .little-birdy {
      margin: 50px;
    }

  }

如您所见，我的尝试是将第二个类嵌套在第一个类中。我现在意识到这是行不通的。还有什么方法可以做到这一点？

Answer 1

CSS 本身不支持这样的嵌套样式。您可以在“默认”样式之后使用覆盖样式，并依靠 CSS 的级联特性来覆盖边距。

.plan-price {
  float: right;
  margin: 83px 20px 20px;
}
.plan-price.private-eye {
  margin: 40px;
}
.plan-price.little-birdy {
  margin: 50px;
}

<div class="price-plans private-eye">
  <p><a href="/account/sign_up?plan=little_birdy" class="button-big reverse-blue">Select</a>
  </p>
</div>

<div class="price-plans little-birdy">
  <p><a href="/account/sign_up?plan=little_birdy" class="button-big reverse-blue">Select</a>
  </p>
</div>

要进行嵌套样式，请看一下像 LESS 这样的 CSS 预处理器。这可以让您完全按照自己的意愿行事。