如何使 .class:not(#id, #id2) 在所有浏览器上工作？ [复制]答案

【问题标题】：How to make .class:not(#id, #id2) work on all browsers? [duplicate]如何使 .class:not(#id, #id2) 在所有浏览器上工作？ [复制]
【发布时间】：2017-08-17 03:27:03
【问题描述】：

我有一个将分配给一个类的 css，比如说 .button，但排除具有 id #id1 和 #id2 的类。我用

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

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

我还没有检查其他浏览器。我怎样才能使排除工作？

【问题讨论】：

标签： css

【解决方案1】：

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

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;
}

查看结果.. 希望这个能对您有所帮助！！！

【讨论】：

@Nice 为我工作谢谢

【解决方案2】：

你可以使用，

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

希望这会对你有所帮助。

【讨论】：

【解决方案3】：

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

or 选择器 (x, y) 并不“简单”。

试试

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

【讨论】：

“或选择器”甚至不是选择器。（我知道 jQuery 是这么称呼它的，但说真的，它不是。）另外，扩展 :not(#id, #id2) 的正确方法是 :not(#id):not(#id2)。奇怪的是，:not(#id), :not(#id2) 实际上是 :not(#id#id2) 的扩展。
@BoltClock 为真，但没有元素可以有两个 id，它们的工作方式相同（但是类选择器）。而:not(#id1#id2) 不能匹配任何东西。（CSS 标准将逗号称为列表选择器，但它执行或操作。
我猜不在 HTML DOM 中。你把它倒过来了 - 它是“选择器列表”，而不是“列表选择器”，但我意识到我们在这一点上正在分裂头发（因为样式规则的整个前奏确实被称为“选择器”，而实际上它由一个选择器列表组成）。