仅用CSS实现：根据指定类元素为目标元素设置差异化背景样式

问题背景 #

给定如下HTML结构：

<body>    
<section>
    <div class="random name">
        <div class="random name">
            <div class="random name">
              <div class="random name">
                 <h2 class="title"></h2>
              </div>
            </div>
        </div>
    </div>
</section>

<div class="random name">
    <div class="random name">
        <div class="random name">
            <div class="random name">
              <div class="random name">
                 <span class="music"></span>
              </div>
            </div>
            <div id="album">
              <div class="random name">
                 <div class="pop rock"></div>
              </div>
            </div>
        </div>
    </div>
</div>
</body>

需实现：

• 当页面存在带rock类的div（可同时带pop类）时，为.title的h2和.music的span设置红色背景；
• 当仅存在带pop类但无rock类的div时，为上述两个元素设置蓝色背景；
• 忽略动态可变的random name类。

实现方案 #

方案一：CSS :has() 选择器（现代浏览器支持） #

利用CSS存在性选择器直接匹配目标元素，无需关心中间动态类：

/* 存在带rock类的div时，设置红色背景 */
body:has(div.rock) .title,
body:has(div.rock) .music {
    background-color: red;
}

/* 仅存在带pop类但无rock类的div时，设置蓝色背景 */
body:not(:has(div.rock)):has(div.pop) .title,
body:not(:has(div.rock)):has(div.pop) .music {
    background-color: blue;
}

注：:has()选择器已支持Chrome、Firefox 121+、Safari等现代浏览器，若需兼容旧版浏览器，推荐使用下方JS方案。

方案二：JavaScript 实现（全浏览器兼容） #

通过JS检测目标元素存在性，动态设置样式：

// 获取需设置样式的元素
const titleEl = document.querySelector('.title');
const musicEl = document.querySelector('.music');

// 检测是否存在带rock类的div
const hasRock = document.querySelector('div.rock') !== null;
// 检测是否存在仅带pop类的div（无rock类）
const hasOnlyPop = !hasRock && document.querySelector('div.pop:not(.rock)') !== null;

// 根据检测结果设置背景色
if (hasRock) {
    titleEl.style.backgroundColor = 'red';
    musicEl.style.backgroundColor = 'red';
} else if (hasOnlyPop) {
    titleEl.style.backgroundColor = 'blue';
    musicEl.style.backgroundColor = 'blue';
}

说明：div.rock会匹配所有带rock类的div（无论是否有其他类），div.pop:not(.rock)专门匹配仅带pop类的div。

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