CSS：样式化具有特定跨度的特定段落[重复]答案

【问题标题】：CSS: Styling a Specific Paragraph that has a Specific Span [duplicate]CSS：样式化具有特定跨度的特定段落[重复]
【发布时间】：2025-12-18 08:05:02
【问题描述】：

可能重复：
Is there a CSS parent selector?

我正在尝试使用“长句”类设置段落的样式，其中包含“背景填充”类的跨度。样式的目标必须是段落而不是跨度。

因此，这个解决方案是不合适的，因为它的目标是跨度：

p.long-sentence span[class="background-fill"]

这个选择器看起来很完美，但它的目标是一个具有“背景填充”属性的跨度，而不是一个类：

p.long-sentence[span="background-fill"]

可以吗？或者对于具有多个变量的选择器来说，这是否过于严格？

【问题讨论】：

所以要明确一点，你想改变span.background-fill的父元素的样式吗？
我认为没有 javascript 就无法做到这一点。您尝试有条件地设置父母的样式这一事实对我来说很奇怪。如果您正在动态生成此标记，那么给父段落一个额外的类以便您可以设置它是微不足道的。
看看这个问题：Is there a CSS parent selector?
老实说，这与this 更相似，但这也是与此问题相同的问题的副本。伙计，所有道路真的确实通向 JQuery :)
是的，作为对 jblasco 的回答，我想为 span 的父元素设置样式。我会检查另一个问题。请不要告诉我这需要 JS！我宁愿在 CSS 中使用解决方法。

标签： css css-selectors

【解决方案1】：

这需要用到 CSS 选择器 4.

例如，下面的选择器代表一个列表项 LI unique 有序列表 OL 的子级：

OL > LI:only-child

但是下面的一个表示一个有序列表 OL，它有一个独特的孩子，那个孩子是 LI：

$OL > LI:only-child

这两个选择器表示的结构是一样的，但是选择器的主题不是。

表格：http://www.w3.org/TR/2011/WD-selectors4-20110929/#subject

但是现在没有浏览器支持 CSS 选择器 4。所以你需要使用 JavaScript。

jQuery:

$("p.long-sentence:has(span.background-fill)").addClass("otherClass");

【讨论】：

感谢 CSS4 的想法，这似乎是一个优雅的解决方案。我想到了一个 CSS 解决方法：将样式从“span.background-fill”移动到新的（备用）选择器“p.long-sentence > span”，然后这个（父）选择器应该能够以“ p.long-sentence[span]" 因为 span 现在没有类（或 ID）。
但是...我的解决方法仅适用于 p.long-sentence 仅包含背景填充跨度而没有其他跨度的情况。
E[foo] 表示具有“foo”属性的 E 元素
在建议 CSS4 选择器之前，最好等待一段时间（阅读：一两年）让事情稳定下来。截至 2012 年，主题选择器现在用 ! 表示。我不知道什么时候会再次改变。