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

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


将样式应用于.a-comp元素中以“ a-”开头的类
忽略.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

最佳答案

您的选择器将匹配具有.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>

关于html - CSS所有类均以开头，并忽略某些子类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49036951/