將樣式應用於分組多個子元素

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>