html - CSS 所有类都以并忽略某些子类开头

Question

我有一个嵌套的 HTML 元素结构，我需要在其中为某些条件应用 css 样式。

1. 将样式应用于 .a-comp 元素中以“a-”开头的类
2. 忽略 .a-col 类及其具有“a-*”类的子元素的样式

下面的代码适用于上述场景。但它不适用于其他具有“a-*”类的子元素。

我怎样才能做到这一点？

.a-comp :not(.a-col) [class^="a-"],
.a-comp :not(.a-col) [class*="a-"] {
  color: red;
}

<div class="a-comp">
  <div class="a-one">
    <div class="a-col">
      <div class="a-text">
        Text1
      </div>
    </div>
  </div>
  <div class="a-row">
    <div class="a-text">
      Text 2
    </div>
  </div>
</div>

View on JSFiddle

Answer 1

您的选择器匹配 .a-*具有 .a-comp 的元素祖先，带有一些不是 .a-col 的中间元素.但是，您的两个示例都匹配该选择器。

第一个有.a-one作为 .a-comp 的后代和 a-text 的祖先.第二个有 .a-row作为 .a-comp 的后代和 a-text 的祖先.

一个解决方案可能是设置 .a-col 的适当子级元素不是是红色的。

.a-comp [class^="a-"] {
  color: red;
}

.a-comp .a-col [class^="a-"] {
  color: black;
}

<div class="a-comp">
  <div class="a-row">
    <div class="a-two">
      <div class="a-text">
        In a ROW
      </div>
    </div>
  </div>
  <div class="a-one">
    <div class="a-col">
      <div class="a-text">
        In a COL
      </div>
    </div>
  </div>
  <div class="a-row">
    <div class="a-text">
      In a ROW
    </div>
  </div>
  <div class="a-one">
    <div class="a-something">
      <div class="a-text">
        In something else
      </div>
    </div>
  </div>
</div>