有没有一种更有效的方式来编写具有一对多关系的类的CSS？

在我的CSS，我有这样的事情：有没有一种更有效的方式来编写具有一对多关系的类的CSS？

.classA .class1, 
.classA .class2, 
.classA .class3 a:hover, 
.classA .class4, 
.classA #id1, 
.classA .class5 
{ color: white;} 

.classA .class1, 
.classA .class6 
{ background-color: red;}

等等

因为我重复.classA了这么多，我想知道是否有写这更有效的方式？

我的使用情况：

我与造型相似的元素，但与不同的配色方案不同的页面。因此，我不是.classA，而是将一类.Orange添加到一个页面，并且说，.Green到另一个页面，.Blue到第三个。

然后，我将橙色和绿色和蓝色样式分别应用到这些页面上的元素。

.Orange .btn, 
.Orange .accordion-heading, 
.Orange .promo-box {color: orange; background: white;} 
.Orange h2 {color: orange;} 

.Green .btn, 
.Green .accordion-heading, 
.Green .promo-box {color: green; background: white;} 
.Green h2 {color: green;}

来源

2017-08-27 jough

这些类实际上代表什么？ “一对多关系”并没有太多解释。 – Ryan

如果它们存在于.classA中的任何位置，则基本上将样式应用于.class2，.class3等。如果这不是你的主要要求，你可以分开课程。 – Amit

如果你需要指定.classA作为所有这些的父类，那么不，我不能想到。在LESS或SASS这样的预处理器中编写代码要容易得多，因为您可以将所有其他类嵌套在.classA下，或者使用mixins快速重复代码。 – Jesse

除非您希望它优先于其他选择器，否则不需要重复.classA。当你像前面一样使用选择器时，你会增加规则的特殊性。例如，采取以下代码：

.classA .class1 {color:red;} 
.class1 {color:white;} 

<div class="classA"> 
    <div class="class1">Text</div> 
</div>

结果为红色文本，因为你的第一个规则是比第二更具体的，即使第二来得晚源顺序。

CSS规范规定，选择优先级是受三个因素，为了：

重要性
特异性
源顺序

所以，选择重复的量在很大程度上直到你如何设置你的样式表和期望的结果。更多的信息在这里：

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

来源

2017-08-27 15:38:34 jfeferman

“你根本不需要重复.classA，除非你希望它优先于其他选择器。“我会假设这正是为什么提问者完全在指定.classA类，为什么你确定他们不需要？ – BoltClock

我不确定，只是假设，因为问题是模糊的也许正确的答案是否定的，除非你使用预处理器，否则CSS结构可以适用于无数的解决方案，更多的信息可以帮助提问者更好地构建自己的代码。 – jfeferman

有没有一种更有效的方式来编写具有一对多关系的类的CSS？

回答

相关问题