CSS 父/祖先选择器
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1251768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Parent/Ancestor Selector
提问by Steve
Possible Duplicate:
Is there a CSS parent selector?
可能的重复:
是否有 CSS 父选择器?
I know this is a shot in the dark, but is there a way, using css only, CSS2, no jquery, no javascript, to select and style an element's ancestor? I've gone through the selectors but am posting this in case I missed something or there is a clever workaround.
我知道这是在黑暗中拍摄,但是有没有办法只使用 css、CSS2、不使用 jquery、不使用 javascript 来选择元素的祖先并为其设置样式?我已经浏览了选择器,但我发布了这个以防我错过了什么或者有一个聪明的解决方法。
For example, say I have a table with classname "test" nested inside a div. Is there some sort of:
例如,假设我有一个嵌套在 div 中的类名为“test”的表。有没有这样的:
<div>
<table class="test">
</table>
</div>
div (with child) .test
{
/*styling, for div, not .test ...*/
}
采纳答案by ChssPly76
There is no such thing as parent selector in CSS2 or CSS3. And there may never be, actually, because the whole "Cascading" part of CSS is not going to be pretty to deal with once you start doing parent selectors.
在 CSS2 或 CSS3 中没有父选择器这样的东西。事实上,可能永远不会有,因为一旦你开始做父选择器,CSS 的整个“级联”部分就不会很好处理。
That's what jQuery is for :-)
这就是 jQuery 的用途:-)
回答by RaYell
In CSS there is an :empty selector that allows you to match empty elements, you can negate the effect with :not selector.
在 CSS 中有一个 :empty 选择器,它允许你匹配空元素,你可以用 :not 选择器否定效果。
div:not(:empty) {
// your styles here
}
However I'm not sure if all browsers support this.
但是我不确定是否所有浏览器都支持这一点。
回答by MikeD
div:not(:empty) {
margin:0;
}
is NOT recognized by http://jigsaw.w3.org/css-validator/as CSS2
不被http://jigsaw.w3.org/css-validator/识别为 CSS2
it's the purpose of CSS to "cascade" down from the more containing to the more specific elements. I guess it's possible for you to "reverse your logic", like in
CSS 的目的是“级联”从更多包含到更具体的元素。我想你有可能“颠倒你的逻辑”,比如
div.myclass { /* format parent */ }
div.myclass * { /* neutralize formats in descendants */}
div.myclass img { /* more specific formats for img children */ }
good luck Mike
祝你好运迈克
回答by teebo
:empty pseudoclass supported by Firefox, but is not compatible with IE.
:empty 伪类受 Firefox 支持,但与 IE 不兼容。
But a very simple jQuery workaround for IE is at http://www.webmasterworld.com/css/3944510.htm. Saved my bacon
但是 IE 的一个非常简单的 jQuery 解决方法是在http://www.webmasterworld.com/css/3944510.htm。救了我的培根