Question

如果我在这样的元素上有2个css类

"The volume is %s" % (self.length*self.width*self.height)

有什么方法可以告诉网页忽略class1的样式并使用class2的样式？

谢谢！

Answer 1

不，一般情况下这是不可能的，但您可以覆盖属性：

.class1 {
    margin-top: 2em;
}

.class2 {
    margin-top: inherit;
}

您还可以使声明更具体：

.class1.class2 {
    /* now set your values here */
}

或者使用!important，但这会让CSS成为一场噩梦。

作为旁注：如果您不想使用class1中的声明，为什么要首先设置值？如果您正在使用JavaScript选择器的类，请考虑使用不同的类进行样式设置和JavaScript。

Answer 2

如果两个文件中都有相同的属性！重要的可以帮助。

<a class="class1 class2">this text will be red</a>

.class1 {
    color:red !important;
}
.class2 {
    color:blue;
}

通常，CSS文件中的后一类是您可以看到的。

<a class="class1 class2">this text will be blue</a>
<a class="class2 class1">this text will be blue</a>

.class1 {
    color:red;
}
.class2 {
    color:blue;
}

Answer 3

以下是一些您可以做的CSS方法，它们涉及特异性。

1 - 使用级联

.class1 {
    color: red;
}
.class2 {
    color: blue;
}

由于.class2稍后出现在样式表中，.class1中出现的任何属性都会胜出。

2 - 使用特异性 - more details on specificity

a.class2 {} /* specificty = 11 */
.class1 {} /* specificity = 10 */

使选择器比另一个更具体，允许它覆盖其他样式声明，即使它出现在样式表中的另一个CSS选择器之前。

还有其他方法可以提高特异性，但如果使用增加特异性的方法，请记住尽可能少地增加它。这样你的风格就会变得更加灵活，并且不会因为大量的ID和/或!important声明而乱扔垃圾。

Specificity Calculator

还有另一种选择，但我倾向于不提倡这种选择。

在css中，如何忽略一个类的样式

3 个答案: