一个类下的CSS类

Question

这个问题可能很愚蠢，但我想从CSS专家那里了解到。有没有办法在一个类下编写CSS类。

假设我在div下有几个div

<div class="parent">
     <div class="c1"></div>
     <div class="c2"></div>
     <div class="c3"></div>
</div>

通常，我们编写类似下面的

的css类

.parent { width: 100%; }
.parent .c1 { //somecode }
.parent .c2 { //somecode }
.parent .c3 { //somecode }

但是，我想知道。我们可以写下面的内容 -

.parent {
    width: 100%;
   .c1 {
      //somecode
   }
   .c2 {
      //somecode
   }
   .c3 {
      //somecode
   }
}

请让我知道好奇心的答案。谢谢你。

Answer 1

您无法使用普通的CSS。

也许您正在寻找less？特别是页面下方的嵌套规则部分。

这可以让你做你想要的，以及许多其他有用的功能，变量和混合。

或者，可以选择SASS。这与less非常相似。

Answer 2

CSS无法做到这一点，但LESS和SASS可以。

请注意这些是CSS编译器，因此他们需要编译步骤并生成所需的CSS（而不是手动编写所有内容）。

Answer 3

听起来你正在寻找类似于嵌套或选择器继承的东西。

这可以通过SASS完成。与LESS非常相似。 http://sass-lang.com/

Answer 4

你不能使用普通的css，但出于可读性目的，如果你不打算在父类以外的任何东西中使用.c1-3那么你可以缩进你的CSS并做

.parent {
    width: 100%;
}
   .c1 {
      //somecode
   }
   .c2 {
      //somecode
   }
   .c3 {
      //somecode
   }

通过这种方式，您可以在代码中轻松查看哪些类属于哪些父类。 （如果你不想沿着LESS SASS路线走下去