css - 在CSS中将子类绑定(bind)到父类

Question

所以，我有如下的 div:

<div class="first">
   <div class="second">
      <div class="third">
         <div class="fourth">

         </div>
      </div>
  </div>

对于 css，我想在“first”中包含“Second”、“third”和“fourth”，如下所示(但显然不正确)。

.first{
  .second{some css}
  .third{some css}
  .fourth{some css}
}

在不重复顶级类的情况下将内部类绑定(bind)到顶级类的正确方法是什么？

Answer 1

试试 SASS。

在 SASS 中你可以这样做:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

SASS Official Page