Question

第三方定义：

.c1 { ... }

我定义了一个匹配c1和c2

的规则

.c1.c2 { ... }

对于 class =＆＃34; c1 c2＆＃34; 的元素，我的规则匹配正确

但是对于 class =＆＃34; c1 c2 [..other class]＆＃34; 的元素，我的规则不符合第三方的规则。< / p>

在这种情况下，如何让我的规则与第三方的规则相匹配（不事先了解其他课程而不更改第三方的规则）？

Answer 1

确保您的规则优先于其他规则的唯一绝对方法是使用!important关键字：

.c1.c2 {
    color: red !important;
}

请注意，如果您知道更具体的选择器，则可以使用它：

＆＃13;

.c1 {
  color: blue;
}
.c2 {
  color: pink;
}
.c1.c4 {
  color: pink !important;
}
.c1.c5 {
  color: white;
}
div .c1.c6 {
  color: gray;
}
.c1.c2 {
  color: red;
}
.c1.c3 {
  color: green;
}

＆＃13;

<div id="a">
  <div class="c1">blue due to .c1</div>
  <div class="c1 c2">red due to .c1.c2</div>
  <div class="c1 c2 c3">yellow due to .c1.c3</div>
  <div class="c1 c2 c3" style="color: black;">black due to inline style</div>
  <div class="c1 c2 c4">pink only because of the !important</div>
  <div class="c1 c2 c5">red becuase .c1.c2 is after .c1.c5 in the css</div>
  <div class="c1 c2 c6">gray only of more specific selector (div .c1.c5)</div>
</div>

＆＃13;

Answer 2

如果它特定于单个元素，你也可以尝试使用id属性作为id定义的css usurps类。

#c1-override {
    color: red
}

Answer 3

语法;当为一组CSS规则使用多个类名时，您需要用逗号分隔它们。

.c1, .c2{
    /* CSS rules here */
}

您也可以使用声明顺序而不是！important，但它更有条理地删除.c1和.c2中应该相同的规则。

css规则多类，如何匹配两个中的多个

3 个答案: