使用：not伪类定位元素

Question

我试图针对某些标头，但特定父元素中的标头除外。当我将下面的样式应用于下面的（抽象的）HTML时，两个标题的字体大小都会受到影响。:not选择器有什么问题？

在这种情况下，我无法修改CSS选择器，但需要确保HTML的格式正确，使得选择器可以按预期工作。

:not(#beginning) h4.small {
  font-size: .25rem;
}

<div id="beginning">
  <h4 class="small">Unaffected header</h4>
</div>

<div id="end">
  <h4 class="small">Affected header</h4>
</div>

Answer 1

使用:not(#beginning) > h4.small代替。您h4.small将永远是没有ID的元素中某个位置的后代beginning。您要选择h4.small不是该元素的子#beginning元素的元素。

:not(#beginning) > h4.small {
  font-size: .25rem;
}

<div id="beginning">
  <h4 class="small">Unaffected header</h4>
</div>

<div id="end">
  <h4 class="small">Affected header</h4>
</div>