css - 不能从 css * 选择器中排除类

Question

我想对一个类的所有子级应用样式，除了 .fixedsize 子级:

    .inner *:not(.fixedsize){
        max-width:100%
    }
    
    .fixedsize > *{
    max-width:none
    }

    <div class="inner">
        <div>
        <div id="map" class="fixedsize">
           inspect the map here
           <div id="childOfMap">inspect the child of map here</div>
        </div>
        </div>
    </div>

好像不行。如何从 * 选择器中排除它及其所有子项？

编辑: 当我检查 stackoverflow 代码段中的主要元素( map )时，它没有 max-width:100% ，这没问题。但是在运行时，当我检查 map 时可能是更复杂的代码，它有 max-width:100% 从这个 * 选择器计算。

Answer 1

问题是 :not() 选择器更具体，因此您需要增加其他选择器的具体性或使用 !important

.inner *:not(.fixedsize) {
  border:1px solid red;
}
/*Adding not() will make the specifity of this one higher*/
.fixedsize *:not(#randomId) {
  border:none;
}

<div class="inner">
  <div>
    <div id="map" class="fixedsize">
      no border
      <div id="childOfMap">no border <span>here also</span></div>
    </div>
    <div>Content</div>
  </div>
  <div>some other content<span>here</span></div>
</div>

!important:

.inner *:not(.fixedsize) {
  border:1px solid red;
}
.fixedsize * {
  border:none!important;
}

<div class="inner">
  <div>
    <div id="map" class="fixedsize">
      no border
      <div id="childOfMap">no border <span>here also</span></div>
    </div>
    <div>Content</div>
  </div>
  <div>some other content<span>here</span></div>
</div>