如何仅用CSS为含/不含.find子类的.title元素设置不同样式？

当然可以！现在主流浏览器已经支持CSS的:has()伪类，它正好能帮你实现「根据父元素是否包含特定子元素来应用不同样式」的需求，完全不需要JavaScript。

具体实现代码 #

针对你的两个场景，对应的CSS写法如下：

/* 场景1：当.title包含.find子元素时 */
.title:has(.find) {
  padding-left: 4px;
}

/* 场景2：当.title不包含.find子元素时 */
.title:not(:has(.find)) {
  padding-left: 9px;
}

对应HTML结构验证 #

• 场景1的HTML：

<h2 class="title"> 
  <span class="ico"></span> 
  <span class="find">Find</span> 
</h2>

这个结构会匹配:has(.find)选择器，应用padding-left: 4px。

• 场景2的HTML：

<h2 class="title"> 
  <span class="ico"></span> 
  Find 
</h2>

这个结构会匹配:not(:has(.find))选择器，应用padding-left: 9px。

兼容性说明 #

:has()伪类目前已经被Chrome、Firefox（版本121及以上）、Safari等主流浏览器支持，如果你不需要兼容非常老旧的浏览器，这个方案完全可行。

内容的提问来源于stack exchange，提问作者Antoine Goethals