css - 在同一元素上使用不同的类将 css 附加到类

Question

我要添加 opacity: 1;到 .main类(本身，而不是 .main.flow )当 .flow 时添加以便它也可以影响 .main.secondary .

类似于使用鼠标事件(悬停、事件)。

.main {
    opacity: 0;
}

<div class="main flow">
    <div class="not-main">
    </div>
</div>

<div class="main secondary">
</div>

我受限于 HTML 的结构，因为我只是修改 CSS。这可能仅使用 CSS 吗？

Answer 1

.main {opacity:0;}
.main.flow {opacity:1;}
.main:not(.flow) {}
[class="main"] {opacity:1;}

<div class="main">
  <div class="not-main">Main will be opaque because it has ONLY the main class</div>
</div>
<div class="main secondary">
  <div class="not-main">Main will be transparent because also has .secondary class</div>
</div>
<div class="main flow">
  <div class="not-main">Main flow would be transparent as well because it has more than just the main class, but it also has .main.flow that changes it to opaque.</div>
</div>

只添加不带空格的:

.main.flow {
  opacity:1;
}