Question

在我的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;}

Answer 1

除非您希望它优先于其他选择器，否则您根本不需要重复.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

是否有更有效的方法来编写具有一对多关系的类的CSS？

1 个答案: