我的浏览器与我的CSS不匹配(但jQuery确实如此)

Question

考虑这些类:

.bio-target-measure {
  opacity: 1;
}
.bio-target-measure:not(.lowerThird-25.lowerThird-active):not(.lowerThird-50.lowerThird-active):not(.lowerThird-100.lowerThird-active):not(.middleThird-25.middleThird-active):not(.middleThird-50.middleThird-active):not(.middleThird-100.middleThird-active):not(.upperThird-25.upperThird-active):not(.upperThird-50.upperThird-active):not(.upperThird-100.upperThird-active):not(.bud-25.bud-active):not(.bud-50.bud-active):not(.bud-100.bud-active) {
  opacity: 0 !important;
}

<div class="mark bio-target-measure upperThird-100" title="Muestra
        Plaga: Oidio
        ID: [4]
        Tercios: [&quot;upperThird&quot;]" style="width:100.0%;height:100%;color:white;background-color:#6a6200;">Test</div>

而这些jQuery调用:

var measures = $('.bio-target-measure');
measures.length; // evaluates to 1.
measures.is('.bio-target-measure:not(.lowerThird-25.lowerThird-active):not(.lowerThird-50.lowerThird-active):not(.lowerThird-100.lowerThird-active):not(.middleThird-25.middleThird-active):not(.middleThird-50.middleThird-active):not(.middleThird-100.middleThird-active):not(.upperThird-25.upperThird-active):not(.upperThird-50.upperThird-active):not(.upperThird-100.upperThird-active):not(.bud-25.bud-active):not(.bud-50.bud-active):not(.bud-100.bud-active)');
// evaluates to true.

var emptyMeasures = $('.bio-target-measure:not(.lowerThird-25.lowerThird-active):not(.lowerThird-50.lowerThird-active):not(.lowerThird-100.lowerThird-active):not(.middleThird-25.middleThird-active):not(.middleThird-50.middleThird-active):not(.middleThird-100.middleThird-active):not(.upperThird-25.upperThird-active):not(.upperThird-50.upperThird-active):not(.upperThird-100.upperThird-active):not(.bud-25.bud-active):not(.bud-50.bud-active):not(.bud-100.bud-active)');
emptyMeasures.length; // evaluates to 1.

但是满足选择器的这种元素的不透明度opacity: 0 !important;(正如使用jQuery看到的)是1.我的谷歌浏览器(47.0.2526.106,Ubuntu 15.04,64bits)浏览器仅使用第一条规则(唯一的是澄清:不透明度0的规则不存在但覆盖:匹配中完全不存在.

问题:是:不规则(我使用它)一个有效的CSS选择器？我知道它适用于jQuery,但我问的是CSS.

Answer 1

根据 @Harry 的评论，您不能在:not(). （@TJCrowder提供的证据：:not，简单选择器，选择器序列）

在这种情况下，你需要重新设计你的逻辑：

.bio-target-measure.lowerThird-25:not(.lowerThird-active),
.bio-target-measure.lowerThird-50:not(.lowerThird-active),
...

使用 LESS 或类似的 CSS 高级版本可以使这变得更加容易：

.bio-target-measure {
    &.lowerThird-25, &.lowerThird-50, &.lowerThird-100 {
        &:not(.lowerThird-active) {
            opacity: 0 !important;
        }
    }
    /* define similar blocks for middleThird and upperThird */
}

上面的代码将编译成第一个代码块中建议的复杂选择器，同时更易于阅读。