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

我在我的主css文件中使用css媒体查询来打印某些页面元素。下面是示例代码css选择器选择页面中存在特定元素的所有元素

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

但我的应用程序是巨大的，我不希望这影响到现有的功能。所以我只希望这个CSS应用的网页，<Div>元素与ID <Grid>存在而且在其他CSS文件中写入这一点，并使用在每一页，因为我需要关于页面此功能将是非常耗时。是否有任何方式来选择所有的身体元素，其中ID为格的div在所有应用程序的单个css文件中退出？我在想像

body [div="Grid"] * {}

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

来源

2013-09-23 Rajesh Dhiman

试试'body div＃Grid {}' - 这是你的意图吗？ –

不会'#Grid * {}'做到这一点吗？ – j08691

'div [id =“Grid”] *'，与'div＃Grid *'完全相同，除非支持得不好。相关元素是否真的是这个元素的子元素？ –

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

但是你可以用CSS4做到这一点，查询Is there a CSS parent selector?了解更多信息:)仅供参考，任何浏览器都不支持此功能。但是，仅仅提以下

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-23 15:29:39 Exception

不，CSS 4为父选择器提供*语法*，但不能使用它在浏览器环境中：'[快速vs完整选择器配置文件]（http://www.w3.org/TR/2013/WD-selectors4-20130502/#profiles）'。 –

@David Thomas：“CSS4”存在的不幸概念只会让事情变得更糟。我看到它的方式，Selectors现在作为CSS规范的其余部分的独立分支存在，为CSS实现定义了一个快速配置文件，并为其他人提供了完整配置文件。 – BoltClock

@DavidThomas看看这个http://www.w3.org/TR/selectors4/#subject。请参阅选择器概述部分的最后一个。 – Exception

编辑：

任何方式来选择所有的身体元素，其中的div id为电网退出

不可能的CSS，因为我们没有家长选择呢，所以你不能选择任何基于子元素的父项。

中序选择div元件，具有idGrid，使用下面

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

Demo

注意选择：以上选择器将只选择具有idGrid那些元素，如果您希望将整个页面定位到存在idGrid的元素，而不是您无法做到的这一点。

如果你想目标元素唯一这是一个特定的页面上，比调用相同idbody元素，并与body进一步巢取代div要瞄准像

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

元素

来源

2013-09-23 14:56:49

只是在这里大声思考......'body：matches（！div＃Grid）*'（显然不会工作，忽略） – BoltClock

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

回答

相关问题