所有类都以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>