Question

如果特定元素存在两个其他CSS类，我想覆盖一个CSS类。

例如：

<img class="class1 class2" />

我希望在这种情况下覆盖class3。

我目前的实现如下所示。

.class1.class2 { .class3 {padding-left: 1px}  }

但这种方法似乎不起作用！

Answer 1

快去

.class1.class2.class3 {
  /* these definitions are more specific and don't need !important; */
}

请记住，这需要您将class3放在元素上：

<element class="class1 class2 class3"></element>

如果您想要添加class3的唯一原因是指定在两个类class1 class2存在时应该应用的样式，那么您甚至不需要class3，快去

.class1.class2 {
  /* these definitions are more specific than those for .class1 or .class2 
  and don't need !important;
  These rules apply to any element that has both class1 and class2 */
}

Answer 2

试试这个：

<html> 

<head> 

<style>
.class1{background:green;}
.class2{background:blue;}
.class1.class2{background:red}

</style> 

</head> 

<body> 

    <p class="class1"> This is a paragraph. </p> 

    <p class="class2"> This is a paragraph. </p> 

    <p class="class1 class2"> This is a paragraph. </p> 

</body> 

</html>

<强>结果：

Answer 3

你不能像你所做的那样将选择器嵌入到另一个选择器中，但是你可以指定当两个类都存在时应该使用什么。 e.g。

HTML

<p class="class1">A</p>
<p class="class2">B</p>
<p class="class1 class2">C</p>

CSS

.class1 {border:1px solid red}
.class2 {border:1px solid green}
.class1.class2 {border:1px solid blue}

https://jsfiddle.net/5zjznd8t/

Answer 4

由于您向我们展示了一个图像标记，我假设class3没有嵌套在此标记内。图像标签不应具有嵌套元素。有了你的定义，class3将成为另一个元素。例如：

 <p class="class1 class2"><span class="3">some text</span</p>

对于您的情况，有必要在同一级别内定义类。

.class1.class2 {
    &.class3 {
        padding-left: 1px
    }
}

amper将class3定义在同一级别。

由于此定义比.class1.class2更明确，因此它应覆盖这些样式。

如果存在另外两个类，则覆盖CSS类

4 个答案: