如果父级具有带有CSS的特定类，如何将样式设置为不相关的元素

Question

我有一个如下的HTML结构。

<div class='A'>
<div class='B' />
<div class='C' />
</div class='A'>
<div class='D' />

我想要实现的目标：

if A has C: add margin to D. (There is a chance that <C /> will not appear.)

Answer 1

我不认为只使用现有的标记就可以完成这样的操作。

在您的模板中，您可能对class C有某种条件。

也许您还可以添加一个条件，以便在class C条件为true时向class A元素添加一个额外的类。

如果C类是而不是渲染，则会有

<div class='A'>
...
</div class='A'>

如果被渲染，那么你会得到类似的东西

<div class='A contains-c'>
<div class='B' />
<div class='C' />
</div class='A'>
<div class='D' />

然后你可以使用下面的css

.contains-c + .D {
...
}

有一个has()css伪类即将推出，但它仍然几乎没有得到支持。如果你感兴趣，你可以在这里阅读