我有这样一个场景:

<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>

现在,如果div有两个类rock and pop,如果这个divrock类,则给具有music类的span和具有title类的h2标签提供所需的样式,例如,背景 colored颜色 应该是red,否则,如果div没有rock类并且只有类pop,则spanh2的背景 colored颜色 应该是blue.

divs个有random name类的人意味着他们没有固定的名字类,它是动态变化的!

推荐答案

I think the best solution is Pete's answer.
Anyway, you can get help from body to solve your problem.

body:has(.pop.rock) .title {
  color: blue;
  background: red;
}

div:has(.pop.rock) .music {
  color: blue;
  background: red;
}

I tested it and there was no problem.
I hope I was able to help.

Preview:

body:has(.pop.rock) .title {
  color: red;
  background: yellow;
}

div:has(.pop.rock) .music {
  color: blue;
  background: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

  <section>
      <div class="random name">
          <div class="random name">
              <div class="random name">
                <div class="random name">
                   <h2 class="title">Test 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">MUSIC</span>
                </div>
              </div>
              <div id="album">
                <div class="random name">
                   <div class="pop rock"></div>
                </div>
              </div>
          </div>
      </div>
  </div>

</body>
</html>

Css相关问答推荐

视频覆盖不适用于reactjs样式的组件

MUI Reaction移除焦点上的轮廓边框

Vue3日期 Select 器:作用域样式不起作用

如何在CSS中实现边框的局部透明?

为什么align-content:start应用于单行项目?

禁用MUI DataGrid上的悬停效果

将 tailwincss 转换为普通 CSS?

Angular 以Angular 获取当前聚焦的元素

条件宽度和省略号不适用于样式化组件 - React.js

使用border-radius CSS时平滑边框

创建一条淡出/在各个方向变得透明的线

使用 HTML 和 CSS 滚动表格

使用css水平+垂直翻转/镜像图像

加载资源失败:服务器响应状态为 404(未找到)

我应该如何组织我的 CSS 文件的内容?

如何根据容器大小设置字体大小?

删除行内块元素中大文本上方和下方的空白

你如何在 SASS 中定义属性 Select 器?

CSS停止图像下的文本换行

使用 HTML data-attribute 设置 CSS background-image url