在css中定义类的正确方法

Question

我想知道在css中定义类时，我是否也必须编写父类？

例如：

<div class="parent">
    <div class="child">
    </div>
</div>

我知道如果我这样做会有效。

.child{
    //properties
 }

但是，这是一个好的做法还是像这样写的东西，

.parent .child{
    //properties
}

Answer 1

除非您需要，否则不要。

1。使用父类定义它会使其更具体。考虑这种情况，.child选择器将应用于具有它的所有元素：

＆＃13;

＆＃13;

.child {
  color: green;
}

＆＃13;

<div class="parent">
  <div class="child">
    Hello
  </div>
</div>
<div class="child">
  Hi
</div>

＆＃13;

＆＃13;

＆＃13;

2。现在，当您更具体地.parent .child时，它将仅适用于父元素上具有类.child和.parent的元素。

＆＃13;

＆＃13;

.parent .child {
  color: green;
}

＆＃13;

<div class="parent">
  <div class="child">
    Hello
  </div>
</div>
<div class="child">
  Hi
</div>

＆＃13;

＆＃13;

＆＃13;