5

可以忽略 css 值吗？

我有两个 div：

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

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

css 类是否可以仅应用于样式为 class1 的 div，如果它们包含 class2 则其被忽略？所以在上面的 div 中，只有 div2 使用 class1 样式，因为 div1 也使用 class2 样式。

4

6 回答 6

14

您可以使用:not选择器。这是一个例子：

CSS

.red:not(.yellow) {
    color: red;
}
.yellow {
    background-color: yellow;
}

HTML：

<div class = "red yellow">
   Glee's awesome!
</div>
<div class = "red">
   Glee's awesome!
</div>

演示。

我希望这有帮助！

于 2012-08-31T13:58:24.183 回答
8

像这样写：

.class1{
  background:red;
}
.class1.class2{
  background:none;
}
于 2012-08-31T13:54:33.660 回答
2

您可以使用:not选择器：

$('.class1:not(.class2)')
于 2012-08-31T13:57:26.523 回答
1

是的，

在 css 属性之后使用 !important

例如height:30px !important

如果你的 class1height:30px 和 class2height:40px那么用户 !important 在 class2 高度

于 2012-08-31T13:54:44.457 回答
0

我用jquery处理这个问题的方式（因为它是你标记它的方式，如果你只想要类class1的div）是做一个检查，比如

if($('div').class() == 'class1') {


}

这将只选择 class 等于的 divclass1而不是 class 的那个class1 class2

于 2012-08-31T13:54:45.000 回答
0

这里有很好的答案，我只想在这里添加一点：您必须在选择器之间做出决定，这些选择器似乎做的相同但略有不同：

  • “在存在时覆盖class1样式。” class2或“当两个班级都存在时，我想要特殊的风格。”
  • class1“在存在和class2不存在时应用特殊样式。”
  • “我真的很想在存在时禁止class1选择器的所有规则class2。”

你必须决定你的要求到底是什么。这些句子之间是有区别的。

在第一种情况下，请使用 @sandeep 之类的 CSS 选择器，因为这些选择器是这样工作的。选择器.class1.class2比.class1选择器更具体，当两个类都存在时选择它。因此，只有在两个类都存在时，您才能在此处设置要应用的规则。更具体的选择器中的冲突规则具有比其他选择器更高的优先级，并且能够覆盖它。

在第二种情况下，使用:not选择器。这些使得只有当一个类存在而其他一些不存在时才可以应用某些样式。

对于第三种情况：您的问题指向忽略 css 类。这是不可能的。您可以在更具体的选择器中覆盖其规则，或者将其规则放在不再匹配某些标签的选择器中。但只要它在那里，你就不能忽视它。因此，您必须class1从标签的 class 属性中删除 。不过，您可以使用 jQuery 来实现这一点。

 $(".class2").removeClass("class1");
于 2012-08-31T14:23:24.333 回答