3

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

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

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

body [div="Grid"] * {}

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

4

2 回答 2

2

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

但是你可以用 CSS4 做到这一点，检查是否有 CSS 父选择器？欲了解更多信息 :) 仅供参考，任何浏览器都不支持此功能。但只是提到下面的代码 

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

这是显示上述示例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

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

于 2013-09-23T15:29:39.147 回答
1

编辑：

以任何方式选择 id 为 Grid 的 div 退出的所有正文元素

CSS不可能，因为我们还没有父选择器，所以你不能根据子元素选择任何父元素。

为了选择div具有 的元素，id Grid请使用下面的选择器

div[id="Grid"] {
  /* Styles goes here */
}

演示

注意：上面的选择器将只选择那些具有 的元素id Grid，如果您希望定位到id Grid存在具有 的元素的整个页面，那么您不能这样做。

如果您想唯一定位特定页面上的元素，则在元素上调用相同id的body元素，然后替换div并body进一步嵌套您想要定位的元素，例如

body[id="Grid"] div.target_unique {
   /* Styles goes here */
}
于 2013-09-23T14:56:49.823 回答