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

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>