仅当元素具有特定子元素时才向元素添加规则

Posted 2023-03-06

【中文标题】仅当元素具有特定子元素时才向元素添加规则

【英文标题】：add a rule to an element only if it has a certain child

【发布时间】：2012-10-21 00:53:31

【问题描述】：

只有当一个元素有某个子元素时，有没有办法给它添加 CSS 规则？我知道使用 CSS 是不可能的，但我不确定是否可以使用 LESS。

【问题讨论】：

只有:contains()检查元素是否有特定的文本内容，恐怕没有类似jQuery的has。

@Andy ~ 我刚刚读到 :contains() 它已被弃用，但如果有替代品，这个可以工作（：

我认为没有替代品。最好的办法可能是使用 JS 扫描查找包含的元素，然后分配一个 CSS 类。

很多相关：***.com/questions/4220327/…

虽然不完全是这个问题的要求，但应该可以做一些非常相似的事情，同构渲染 react 以基于 js 逻辑生成 html，并使用样式化组件生成基于 js 逻辑的支持 css

【参考方案1】：

这在 CSS 或 LESS 中是不可能的。

我建议你最好的选择是 jQuery。

如果您的父元素是 .parent 而您的子元素是 .child，您可以这样做：

$('.parent:has(.child)').addClass('myClass');

参见示例：http://jsfiddle.net/d8Lz5/

【讨论】：

我试图避免使用 JS，因为它是一个移动网络应用程序......如果它包含一些子元素，我想要更改的元素唯一不同的是添加一些填充到它...对于这样的事情我不喜欢使用jQuery ...但显然没有任何其他方法

@Roland 你可以给孩子添加边距。

@Stefan ~ 我想我现在已经做到了，如果是这样的话我就不会发布这个（：它需要应用于二级父级，否则什么都不会发生（ ：

更简洁的语法是使用 jQuery 函数 has 就像在 $('.parent').has('.child').addClass('myClass'); 中一样

@TomerW 我喜欢！我已经用类似的语法更新了我的答案。

【参考方案2】：

如果 CSS 无法实现，那么 LESS 也无法实现，它会编译为普通的旧版 CSS。

问题是，LESS 是在不了解它所应用的 HTML 的情况下编译的，也没有任何客户端脚本。因此，任何单独使用 CSS 无法实现的事情，用 LESS 是不可能实现的。

您可以通过使用客户端 javascript 来实现您想要的，或者您可以等到 CSS4 出来，然后使用父选择器来达到您想要的效果。

【讨论】：

你知道CSS4什么时候发布吗？我还没有时间阅读有关任何已弃用或新东西的任何内容......

不，抱歉，我没有关于发布日期的任何信息。但是无论如何，任何功能在大多数浏览器中都需要几年的时间才能运行，所以不要为此感到压力，只需尝试用我们现有的东西做到最好，~）