Question

如果我有以下

.dark-theme .link {color:black;}
.dark-theme a {color:red;}
.dark-theme button {color:green;}
.dark-theme div {color:orange;}
.dark-theme .whatever {color:blue;}
.dark-theme .element {color:navyblue;}
.dark-theme .element2 {color:black;}

有没有办法做类似

的事情

.dark-theme {
    .link {color:black;}
    a {color:red;}
    button {color:green;}
    div {color:orange;}
    .whatever {color:blue;}
    .element {color:navyblue;}
    .element2 {color:black;}
}

分组儿童的风格，所以我不必在以前继续改写父母。

Answer 1

@LGSon是正确的 - 如果可以使用它，Sass或LESS将非常适用于此。例如，您的代码将在this demonstration website上准确翻译您想要的内容。

有关详细信息，请参阅Nesting CSS classes。

编辑：添加了使用LESS来完成此任务的示例。

<div>
  <span>Hello</span>
  <div>World</div>
</div>

<style type="text/less">
div {
font-size: 2em;
span {color:green;};
div {color:blue;};
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js" type="text/javascript"></script>

将样式应用于分组的多个子元素

1 个答案: