我的浏览器与我的 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. 我的 Google Chrome（47.0.2526.106，Ubuntu 15.04，64 位）浏览器使用 only 第一条规则（only 是为了澄清：不透明度为 0 的规则不存在但被覆盖：匹配中完全不存在）。

问题： :not 规则（如我所用）是有效的 CSS 选择器吗？我知道它在 jQuery 中有效，但我问的是 CSS。

Answer 1

根据@Harry 的评论，您不能在:not() 中使用组合选择器。 （证据由@TJCrowder 提供：:not、simple selector、sequence of selectors）

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

.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 */
}

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

Answer 2

事实上，@NietTheDarkAbsol 的回答是预期答案的一半：我的选择器在 CSS 中无效（是的，在 jQuery 中）。

但是，重写逻辑也需要保留类关系。这意味着：

一个 .bio-target-measure 不能同时满足以下 4 个条件，其不透明度必须为 0：

• .lowerThird-(25|50|100).lowerThird-主动
• .middleThird-(25|50|100).middleThird-主动
• .upperThird-(25|50|100).upperThird-主动
• .bud-(25|50|100).bud-active

当至少有一个对应的-active 过滤器未设置时，他的答案中的选择器会生成0。由于每个标记可以使用多个-active 过滤器，因此必须以默认否定的方式重新编写解决方案（即不透明度默认为 0，并且在具有其他类时不会为 0）。 sass 脚本是这样的：

.bio-target-measure {
  @each $lowerThird in 0, 25, 50, 100 {
    @each $middleThird in 0, 25, 50, 100 {
      @each $upperThird in 0, 25, 50, 100 {
        @each $bud in 0, 25, 50, 100 {
          $lowerThirdClass: '.lowerThird-#{$lowerThird}.lowerThird-active';
          $middleThirdClass: '.middleThird-#{$middleThird}.middleThird-active';
          $upperThirdClass: '.upperThird-#{$upperThird}.upperThird-active';
          $budClass: '.bud-#{$bud}.bud-active';

          @if $lowerThird == 0 { $lowerThirdClass: ''; }
          @if $middleThird == 0 { $middleThirdClass: ''; }
          @if $upperThird == 0 { $upperThirdClass: ''; }
          @if $bud == 0 { $budClass: ''; }

          $sum: $lowerThird + $middleThird + $upperThird + $bud;
          @if $sum > 50 {
            $sum: 100;
          }

          &#{$lowerThirdClass}#{$middleThirdClass}#{$upperThirdClass}#{$budClass} {
            opacity: $sum / 100;
          }
        }
      }
    }
  }
}