“包含 bar 的 foo”的 CSS 选择器？ [复制]

Posted 2023-03-06

【中文标题】“包含 bar 的 foo”的 CSS 选择器？ [复制]

【英文标题】：CSS selector for "foo that contains bar"? [duplicate]

【发布时间】：2011-01-01 07:36:16

【问题描述】：

有没有办法制作符合以下内容的 CSS 选择器？

All OBJECT elements
  which have a PARAM element inside of them

选择器

OBJECT PARAM

不起作用，因为它匹配 PARAM，而不是 OBJECT。我想将 display:none 应用于对象；将其应用于 PARAM 是没有用的。

（我知道我可以使用 jQuery - $("object param").closest("object") - 和 VanillaJS - document.querySelector("object param").closest("object") - 但我正在尝试在页面上创建 CSS 规则。）

【问题讨论】：

有没有这样的css集合选择器.main [:hover,ul,ul>li,p] display:inline-block;

可以做一个“有孩子”选择器object:not(:empty) display: none; jsfiddle.net/xeepete/949a55oo

@xeepete 你能提供更完整的建议吗？

【参考方案1】：

不，您正在寻找的是一个父选择器。 CSS 没有；它们已被多次提出，但我不知道包括它们在内的现有或即将推出的标准。您是正确的，您需要使用 jQuery 之类的东西或使用额外的类注释来实现您想要的效果。

这里有一些类似的问题，结果相似：

Is there a CSS parent selector? CSS Parent/Ancestor Selector Complex CSS selector for parent of active child

【讨论】：

JSYK，CSS 父选择器将出现在 CSS4 中，因为能够通过在其前面放置一个美元符号来选择选择器中哪个元素的样式：$div > span 将选择 div有一个直系子代的跨度。

在选择器部分之前放一个美元符号，这样它可能会干扰 SCSS/SASS 语法，很酷。为什么他们不使用多次提出的< 符号，或者:parent 伪类，甚至是选择器部分后面的! 符号？在我看来，它们都比使用 $ 符号更合乎逻辑......

是的，我知道，php 很多

@Mészáros Lajos CSS 不依赖于 SCSS，他们没有义务这样做。我宁愿看到 CSS 变得足够健壮，以使 LESS/SCSS 实际上过时，无论选择哪种语法。

仅供参考，这现在存在于 CSS 选择器级别 4 规范中：:has()

【参考方案2】：

唯一更接近的是 CSS3 中的 :contains 伪类，但它只选择文本内容，而不是标签或元素，所以你运气不好。

在 jQuery 中选择具有特定子级的父级的更简单方法可以写成（使用:has()）：

$('#parent:has(#child)');

【讨论】：

谢谢——但这与 $("#parent #child") 有何不同？

$("#parent #child") 选择作为#parent 的子元素的所有#child 元素。 $('#parent:has(#child)') 选择所有以#child 作为子元素的#parent 元素。

OP 说他知道怎么用 jQuery 做，但是想要 CSS

@SpeedyNinja，不过答案包含比主题启动器更好的 jQuery sn-p

@ZachSaucier 这个例子在某些情况下是有意义的。该站点可能有不同的页面，其中#parent 有时包含#child，有时不包含。如果您只想在具有#child 的#parent 元素上做某事，那么这是一种实现方式。

【参考方案3】：

有什么方法可以通过编程将类应用到对象上？

<object class="hasparams">

然后做

object.hasparams

【讨论】：

谢谢，但我需要在对象存在之前执行此操作；否则它们会在被隐藏之前瞬间闪现。

如果您的问题是无样式内容 (FOUC) 的闪烁，也许您应该解决这个问题。见这里：***.com/questions/3221561/…

晚了几年但是是的，看看 tahdhaze09 的回答，你会使用“object [class ^='hasparams']”