考虑这些类:
.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: ["upperThird"]" 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;
选择器的这种元素的不透明度是 1。我的 Google Chrome (47.0.2526.106, Ubuntu 15.04, 64bits) 浏览器使用 only 第一条规则(only 是澄清:不透明度为 0 的规则不存在,但被覆盖:是完全缺席比赛)。
问题::not 规则(如我所用)是有效的 CSS 选择器吗?我知道它在 jQuery 中有效,但我问的是 CSS。
最佳答案
根据@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 */
}
以上内容将编译成第一个代码块中建议的复杂选择器,同时更易于阅读。
关于jquery - 我的浏览器与我的 CSS 不匹配(但 jQuery 匹配),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34637428/