CSS - 如果孩子有特定的类，则设计父类[重复]

Posted 2023-03-06

【中文标题】CSS - 如果孩子有特定的类，则设计父类[重复]

【英文标题】：CSS - design parent class if child has a specific class [duplicate]

【发布时间】：2012-10-06 23:02:27

【问题描述】：

可能重复：Complex CSS selector for parent of active childIs there a CSS parent selector?

有没有办法根据子元素是否有特定的类来设计父类？

<div class="container">
   <div class="content1">
      text
   </div>
</div>

.

<div class="container">
   <div class="content2">
      text
   </div>
</div>

我想根据子类是content1 还是content2 来设计第一个.container。 它必须是纯 css 解决方案，没有 javascript。

【参考方案1】：

不，你不能那样做。 CSS 不能根据子元素选择元素，除了检查元素是否为空。

【参考方案2】：

您要的是神话般的 CSS 父选择器。也许有一天。

【参考方案3】：

为什么不使用container1 + content 和container2 + content？

<div class="container1">
    <div class="content">
      text
    </div>
</div>

<div class="container2">
    <div class="content">
        text
    </div>
</div>

然后像这样写CSS：

.container1 .content 
    /* Container 1 styles here */


.container2 .content 
    /* Container 2 styles here */

【讨论】：

不会将样式应用于 .content 元素吗？澄清一下，我认为他的要求是将样式应用于容器元素而不是子元素。

@Asad：是的，如果在.content div 之外还有其他内容，但在需要设置样式的.container div 内部，那么OP 可以简单地为.container1 编写规则和.container2