CSS 选择器 - 具有给定子元素的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4220327/
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 selector - element with a given child
提问by aepheus
I'm looking to make a selector which will select all elements if they have a specific child element. For example, select all <div>with a child <span>.
我正在寻找一个选择器，如果它们具有特定的子元素，它将选择所有元素。例如，选择 all <div>with a child <span>。
Possible?
可能的？
采纳答案by zzzzBov
Is it possible to select an element if it contains a specific child element?
如果元素包含特定的子元素，是否可以选择该元素？
Unfortunately not yet.
不幸的是还没有。
The CSS2and CSS3selector specifications do not allow for any sort of parent selection.
A Note About Specification Changes
关于规格变更的说明
This is a disclaimer about the accuracy of this post from this point onward. Parent selectors in CSS have been discussed for many years. As no consensus has been found, changes keep happening. I will attempt to keep this answer up-to-date, however be aware that there may be inaccuracies due to changes in the specifications.
从现在开始，这是对这篇文章准确性的免责声明。CSS 中的父选择器已经讨论了很多年。由于尚未达成共识，因此不断发生变化。我会尽量保持这个答案是最新的，但是请注意，由于规格的变化，可能会有不准确的地方。
An older "Selectors Level 4 Working Draft"described a feature which was the ability to specify the "subject" of a selector. This feature has been dropped and will not be available for CSS implementations.
较早的“选择器级别 4 工作草案”描述了一个功能，即指定选择器的“主题”的能力。此功能已被删除，将不可用于 CSS 实现。
The subject was going to be the element in the selector chain that would have styles applied to it.
主题将是选择器链中将应用样式的元素。
Example HTML示例 HTML<p><span>lorem</span> ipsum dolor sit amet</p>
<p>consecteture edipsing elit</p>
This selector would style the spanelement
此选择器将设置span元素的样式
p span {
color: red;
}
This selector would style the pelement
此选择器将设置p元素的样式
!p span {
color: red;
}
A more recent "Selectors Level 4 Editor's Draft"includes "The Relational Pseudo-class: :has()"
最近的“Selectors Level 4 Editor's Draft”包括“关系伪类：:has()”
:has()would allow an author to select an element based on its contents. My understanding is it was chosen to provide compatibility with jQuery's custom :has()pseudo-selector*.
:has()将允许作者根据其内容选择元素。我的理解是选择它是为了提供与jQuery 的自定义:has()伪选择器*的兼容性。
In any event, continuing the example from above, to select the pelement that contains a spanone could use:
无论如何，继续上面的例子，选择p包含spanone的元素可以使用：
p:has(span) {
color: red;
}
* This makes me wonder if jQuery had implemented selector subjects whether subjects would have remained in the specification.
* 这让我怀疑 jQuery 是否实现了选择器主题，主题是否会保留在规范中。
回答by Troy Alford
Update 2019
2019 年更新
The :has()pseudo-selectoris propsed in the CSS Selectors 4 spec, and will address this use case once implemented.
该:has()伪选择是propsed在CSS选择4规格的，一旦实施将解决这个用例。
To use it, we will write something like:
要使用它，我们将编写如下内容：
.foo > .bar:has(> .baz) { /* style here */ }
In a structure like:
在像这样的结构中：
<div class="foo">
<div class="bar">
<div class="baz">Baz!</div>
</div>
</div>
This CSS will target the .bardiv - because it bothhas a parent.fooand from its position in the DOM, > .bazresolves to a valid element target.
这个CSS将针对.barDIV -因为这两者有一个父.foo和其在DOM位置，> .baz解析为一个有效的元素目标。
Original Answer(left for historical purposes) - this portion is no longer accurate
原始答案（留作历史用途）-这部分不再准确
For completeness, I wanted to point out that in the Selectors 4specification (currently in proposal), this will become possible. Specifically, we will gain Subject Selectors, which will be used in the following format:
为了完整起见，我想指出在Selectors 4规范（目前处于提案中）中，这将成为可能。具体来说，我们将获得Subject Selectors，它将以以下格式使用：
!div > span { /* style here */
The !before the divselector indicates that it is the element to be styled, rather than the span. Unfortunately, no modern browsers (as of the time of this posting) have implemented this as part of their CSS support. There is, however, support via a JavaScript library called Sel, if you want to go down the path of exploration further.
在!之前的div选择器指示它是要被风格，而不是元件span。不幸的是，没有现代浏览器（截至本文发布时）将此作为其 CSS 支持的一部分来实现。但是，如果您想进一步探索，可以通过名为 Sel 的 JavaScript 库提供支持。
回答by Sebastian K
I agree that it is not possible in general.
我同意这在一般情况下是不可能的。
The only thing CSS3 can do (which helped in my case) is to select elements that have no children:
CSS3 唯一能做的事情（这对我来说很有帮助）是选择没有子元素的元素：
table td:empty
{
background-color: white;
}
Or have any children (including text):
或者有任何孩子（包括文本）：
table td:not(:empty)
{
background-color: white;
}
