<分区>
标签 css css-selectors
<分区>
在我的 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;}
最佳答案
除非您希望它优先于其他选择器，否则您根本不需要重复 .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 - 有没有更有效的方法来编写具有一对多关系的类的 CSS？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45906275/
相关文章：
html - 由于 viewwidth，iPhone 4(仅限)将 div 拉伸(stretch)出屏幕
javascript - 如何使喜欢和添加到购物车图标切换外观
java - 是否可以使用 Selenium Java 从 href 标签获取书籍作者姓名值？
html - 任意子字符串属性值选择器在 IE7 中不起作用
xml - Nokogiri 的 clojure 等价物是什么(用于使用 xpath 和 css 选择器解析 xml)
html - 在 CSS 中居中 div - 这是如何工作的？
php - Bing Web Search API v7 似乎不起作用