使用具有类属性的！important覆盖css而不添加id以增加特异性

Question

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

我有一个CSS规则

.class1{
text-align: left !important;
}

如何在不添加具有相同类名的样式的情况下覆盖此规则？我已经尝试在上述规则下添加css，但不起作用：

.class1 {
  text-align: left !important;
}

.class2 {
  text-align: center !important;
}

<div class="class1 class2"> text</div>

我只能向该元素添加一个类。

如果在html头的<style>标记中定义了class1规则，将会有所不同

Answer 1

这是答案：

HTML:
<div class="class1 class2">text</div>

CSS:
.class1{
text-align: left !important;
}

.class2{
text-align: center !important;
}

Answer 2

我怀疑您在其他地方有另一个css文件，以更高的优先级定义.class1。在这种情况下，没有指定更多内容就无法完成。您可以按ID指定，也可以使用内联样式：

<div class="class1" style="text-align: center !important"> text2</div>

或避免使用class1，而是创建另一个扩展它的类，这样它将在class1中具有其他所有内容，但会覆盖text-align：

.class2 {
  @extend .class1;
  text-align: center !important;
}

并将html设为

<div class="class2"> text2</div>

Answer 3

尝试一下

第一种方法，如果您只有一个班级（class1）。然后按照以下代码

<div class="class1"></div>
.class1{
  text-align: left !important;
}
div.class1{
  text-align: center !important;
}

第二种方式，如果您有两个班级（class1 class2），请遵循以下代码

<div class="class1 class2"></div>

.class1{
  text-align: left !important;
}
.class2{
  text-align: center !important;
}

Answer 4

您可以尝试这种第一种方式-

.class1{ text-align: left !important;}
.class2{ text-align: center !important;}

<div class="class1">Class 1</div>
<div class="class1 class2">Class 2</div>

您可以尝试第二种方式-

.class1{ text-align: left !important;}
div.class1{ text-align: center !important;}

<div class="class1">Class 1</div>