Question

我有一个将被分配给一个类的CSS，比方说.button，但是排除了具有id＃id1和＃id2的类。我用

.class:not(#id, #id2) { background: #f46b45; }

适用于Chrome。但是一旦我在Safari上打开，样式background: #f46b45;就会分配给带有.button按钮的所有按钮。

我还没有检查过其他浏览器。我如何进行排除工作？

Answer 1

根据MDN，:not中只有简单选择器得到广泛支持。

或选择器（x, y）不简单＆＃34;。

尝试

.class:not(#id), .class:not(#id2) { … }

Answer 2

哟可以用，

.class:not(#id1):not(#id2):not(#id3) { color: green; }

希望这会对你有所帮助。

Answer 3

解决方案示例在所有具有最新版本的浏览器上兼容：

HTML：

<ul class="mylist-inline">
        <li class="menu">Example1</li>
        <li class="menu">Example2</li>
        <li class="menu">Example3</li>
        <li class="menu">Example4</li>
        <li id="custom-setting" class="menu">Button</li>
</ul>

添加此css：

.mylist-inline {
  list-style: outside none none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.mylist-inline .menu:not(#custom-setting){
  background: #ccc none repeat scroll 0 0;
  display: inline-block;
  padding: 10px 15px;
}
#custom-setting {
  background: red none repeat scroll 0 0;
  border-radius: 5px;
  color: #fff;
  max-width: 200px;
  padding: 15px 20px;
  text-align: center;
}

查看结果.. 希望对你有帮助！！！

如何使.class：not（#id，＃id2）适用于所有浏览器？

3 个答案: