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%，这没关系。但是在运行时，当我检查地图时，它可能是一个更复杂的代码，它有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>

不能从css * selector中排除类

1 个答案: