为什么我的jQuery：Not()选择器不能在CSS中工作？

Question

为什么我的jQuery：Not()选择器不能在CSS中工作

我有这样的布局：

<div id="sectors">
    <h1>Sectors</h1>
    <div id="s7-1103" class="alpha"></div>
    <div id="s8-1104" class="alpha"></div>
    <div id="s1-7605" class="beta"></div>
    <div id="s0-7479"></div>
    <div id="s2-6528" class="gamma"></div>
    <div id="s0-4444"></div></div>

使用这些CSS规则：

#sectors {
    width: 584px;
    background-color: #ffd;
    margin: 1.5em;
    border: 4px dashed #000;
    padding: 16px;
    overflow: auto;}#sectors > h1 {
    font-size: 2em;
    font-weight: bold;
    text-align: center;}#sectors > div {
    float: left;
    position: relative;
    width: 180px;
    height: 240px;
    margin: 16px 0 0 16px;
    border-style: solid;
    border-width: 2px;}#sectors > div::after {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    font-weight: bold;
    text-align: center;
    text-transform: capitalize;
    background-color: rgba(255, 255, 255, 0.8);

我使用jQuery添加unassigned类添加到没有类的扇区。alpha, beta或gamma:

$('#sectors > div:not(.alpha, .beta, .gamma)').addClass('unassigned');

然后，我对该类应用了一些不同的规则：

#sectors > div.unassigned {
    color: #808080;
    background-color: #e9e9e9;
    opacity: 0.5;}#sectors > div.unassigned::after {
    content: attr(id) ' - Unassigned';}#sectors > div.unassigned:hover {
    opacity: 1.0;}

在现代浏览器中，一切都是完美无缺的。

交互式jsFiddle预览

但就像:not()jQuery中的选择器是基于:not()在CSS 3中，我想我可以直接将它移到我的样式表中，这样我就不必依赖于使用jQuery添加额外的类了。此外，我对支持早期版本的IE并不感兴趣，其他浏览器对:not()选择器。

所以我试着改变.unassigned上面的部分(知道我的布局中只有扇区Α，Β和Γ)：

#sectors > div:not(.alpha, .beta, .gamma) {
    color: #808080;
    background-color: #e9e9e9;
    opacity: 0.5;}#sectors > div:not(.alpha, .beta, .gamma)::after {
    content: attr(id) ' - Unassigned';}#sectors > div:not(.alpha, .beta, .gamma):hover {
    opacity: 1.0;}

但一旦我这么做它就停止工作了所有浏览器！我的未分配区域不再是灰色的、褪色的或标记为“未分配的”的。

已更新但不具有交互性的jsFiddle预览

为什么:not()选择器在jQuery中工作，但在CSS中失败？既然jQuery声称“CSS 3兼容”，或者我缺少了什么东西，那么在这两个地方，它不是应该同样工作吗？

是否有一个纯粹的CSS解决方案，或我将不得不依赖于一个脚本？

Answer 1

它似乎是人们思考的唯一原因:not(#foo, #foo *)在CSS中工作。嗯，也许jQuery支持它也与它有关