CSS中的嵌套类使用嵌套样式较少的其他样式

Question

我使用css定义了这样的风格

.main> .test{
 display: block;
 background:#FFFFFF
}

此样式存储在我不想更改的文件中。我的新html结构是

<div class="main">
  <form>
    <div class="test">
    ...
    </div>
  </form>
</div>

在这种情况下，不会应用样式。我的问题是：是否有可能定义这样的CSS，如果是

.main> form> .test{      
 }

使用类似于＆＃34; .main＆gt;中定义的样式。测试＆＃34;没有复制粘贴这种风格的内容

Answer 1

简单回答

使用纯CSS，无法扩展类或在类之间使用继承

-

可能的解决方案

您可以使用像＃Sass这样的CSS预处理器，使用@extend关键字。

代码示例：

.message {
  padding: .5em;
}

.message-error {
  @extend .message;
}

有关其使用情况的更多信息here