一个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预处理器，它可以让您完全按照自己的要求进行操作。

Answer 2

要区分div，请给他们id。＃。 id =＆＃34;无论＆＃34;。类用于使div在命名为同一类时具有相同的css样式，但id用于单独设置样式。在你的css文件中做#id {code}

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

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


#something{
code
}

#somethingElse{
code
}

Answer 3

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

 .little-birdy {
      margin: 50px;
    }