css - 覆盖多个类

Question

如果我试图覆盖多个类中的特定标签，我是否必须为每个类明确地写出来，或者有没有办法将它们组合起来。例如我有：

.class1 { }
.class2 { }
.class1 h2 {
    <!-- some code -->
}

而且我想将class1中h2标签的代码也应用于class2中的h2标签，有没有办法为class1和class2定义它而无需两次编写代码？

Answer 1

你想要选择器分组：

.class1 h2,
.class2 h2 { ... }

引用规范：

在这个例子中，我们将三个具有相同声明的规则压缩为一个。因此，

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

相当于：

h1, h2, h3 { font-family: sans-serif }

Answer 2

如果你想让 css 应用于页面中的所有 h2，你可以定义它的页面级别。但是如果你只想申请 class1 & class2 ，你将不得不写两次。

Answer 3

如果您在多个类中具有相同的 css 样式，那么您应该组合这些类，以优化代码。

您可以对 css 类进行分组。

.class1 h1{ ........}
.class2 h2{ ........ }

这意味着，h2 元素将具有 class1 css 样式。

.class1,.class2{..........}

这意味着，class1、class2 都具有相同的 css 样式

Answer 4

 <h2 class="class1 class2">This is my taunt</h2>

这是实现多个类的标准方法。作为一般规则，您应该定义预先知道将重叠的类，以排除您知道将在另一个类中的声明。为常见的属性/值对创建第三类。