替代 css3 不是选择器答案

【问题标题】：Alternative to css3 not selector替代 css3 不是选择器
【发布时间】：2011-01-10 22:58:48
【问题描述】：

是否有任何替代 :not css3 选择器符合 IE8（和怪癖模式）。

在 css 或 javascript/jquery 中模拟选择器或类似的东西。

我正在使用*:not，如下所示。随意推荐一个完全避免使用:not 的解决方案。

@media screen {
    #printable {
        visibility: hidden;
    }
}

@media print {
    *:not(#printable) {
        visibility: hidden;
    }
    #printable {
        position: absolute;
        visibility: visible;
    }
}

请注意，:not 的使用与 @media print 的使用相关联，因此仅使用简单的 jQuery 解决方案将 css 应用于 $(":not(#printable)") 将无法正常工作。

包含像 ie9.js 或 selectivirz 这样的整个库不是一个选项，因为它会影响页面的其他各个部分，并且会涉及大量的重新测试。

一个 jsfiddle，显示它在支持 :not http://jsfiddle.net/Raynos/TjKbz/ 的浏览器中工作

【问题讨论】：

标签： javascript jquery html css css-selectors

【解决方案1】：

在这种情况下，我认为您不需要 :not：

@media screen {
    #printable {
        visibility: hidden;
    }
}

@media print {
    * {
        visibility: hidden;
    }
    #printable {
        position: absolute;
        visibility: visible;
    }
}

选择器#printable 的优先级高于*，因此您的#printable 元素将可见。

【讨论】：

这正是我想要的。
请记住，#printable 的子元素将被隐藏，除非您还将 #printable * 样式设置为可见。所以@hardyharzen 的回答更好。同样hidden 元素仍然显示为空格；你可能想改用display:none;。
@Spudley display none; 用于#printable 的容器将删除#printable

【解决方案2】：

您可以尝试特异性覆盖，即

@media print {
  * {
    visibility: hidden;
  }
  #printable, #printable * {
    visibility: visible;
  }
}

【讨论】：

【解决方案3】：

见Add CSS3 support to IE7+ with Javascript和http://selectivizr.com/

【讨论】：

我特别提到不能使用这些库。