html - css 选择器选择页面中存在特定元素的所有元素

Question

我在我的主 css 文件中使用 css 媒体查询来打印一些页面元素。这是示例代码

body *
    {
        visibility: hidden;
        background: #FFF;      
        margin: 0px;
        padding: 0px;
    }
    #Grid *
    {
        visibility: visible;
    }

但我的应用程序很大，我不希望这影响现有功能。所以我只希望这个 css 应用于 <Div> 的页面 id 为 <Grid> 的元素 还存在将其写入其他 css 文件并在每个页面中使用会非常耗时，因为我需要在大约 80 页 上使用此功能。是否有任何方法来选择所有正文在所有应用程序的单个 css 文件中，id 为 Grid 的 div 存在的元素？我在想类似的东西

body [div="Grid"] * {}

但不幸的是，这不起作用。

Answer 1

AFAIK 使用子元素选择父元素在 CSS2 或 CSS3 中是不可能的。

但是你可以用 CSS4 做到这一点，检查 Is there a CSS parent selector?了解更多信息 :) 仅供引用，这在任何浏览器中都不支持。但只是提到下面的代码

body! > div#Grid { 
   background-color:red;
}

这是上面例子中的 fiddle http://jsfiddle.net/M75wZ/

但是如果您对启用父选择器的第三方 JS 插件开放，这里有一个插件可以完成这项工作 https://github.com/Idered/cssParentSelector/blob/master/jQuery.cssParentSelector.js .

但是如果你只想满足这个要求并想让它工作，请按照下面的方式做

 window.onload = function(){
     var div = document.getElementById('Grid');
     if(div){
        if(document.body.className.indexOf('bodyHasGrid') == -1){
           document.body.className += " bodyHasGrid";
        }
     }
 }     

然后使用 body.bodyHasGrid 应用样式

希望这至少能给出一个想法。