如何仅当特定子元素存在时为父元素应用指定CSS样式？

API 探路者

2026-7-4

问题：能否通过CSS实现基于子元素存在性的样式控制？

仅当.Environment .interior_environment容器下存在.aboutEnvironment子元素时，为.Environment添加display: block样式，为.interior_environment添加flex: 1样式；若该子元素不存在，则不应用这些样式。请问这一需求可以用CSS实现吗？还是必须通过JavaScript来完成？

现有HTML结构

<div class="Environment">
    <div class="col-md-6 interior_environment">
        <div class="aboutEnvironment">
            <div class="col-sm-12 col-md-12">
                <div class="title_environment"></div>
                <div class="description_environment">
                    <p><span>The natural environment or natural world encompasses all living and non-living things occurring naturally, meaning in this case not artificial. The term is most often applied to Earth or some parts of Earth.</span></p>
                </div>
            </div>
        </div>       
    </div>
</div>

目标样式

.Environment {
  display: block;
}
.interior_environment {
  flex: 1;
}

解答

可以用CSS实现，不需要JavaScript。CSS的:has()选择器专门用来检测元素是否包含指定的后代或子元素，完全匹配你的需求。

实现代码

/* 当.interior_environment下存在.aboutEnvironment时，为.Environment设置样式 */
.Environment:has(.interior_environment .aboutEnvironment) {
  display: block;
}

/* 当.interior_environment自身包含.aboutEnvironment时，为其设置样式 */
.interior_environment:has(.aboutEnvironment) {
  flex: 1;
}