使用 :not 伪类定位元素 [重复]答案

【问题标题】：Targeting an element using the :not pseudoclass [duplicate]使用 :not 伪类定位元素 [重复]
【发布时间】：2020-01-19 20:53:23
【问题描述】：

我正在尝试定位某些标题，但特定父元素中的标题除外。当我将下面的样式应用于下面的（抽象的）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>

【问题讨论】：

标签： html css

【解决方案1】：

请改用:not(#beginning) > h4.small。您的h4.small 将始终是不具有 ID beginning 的元素中的后代somewhere。您要选择不属于#beginning 元素的子元素的h4.small 元素。

: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>

【讨论】：

我还建议使用div:not(#beginning) > h4.small。据我了解，这会更高效，因为它不必针对每个元素检查:not。
感谢您的回答。在这种情况下，我无法更改 CSS 选择器 - 我需要使用 HTML 才能在提供的选择器内工作。如果我理解你的观点，那么 div#beginning 中的 h4.small 仍然会受到影响，因为 h4 仍然在一些没有开头 id 的 other 元素中。那正确吗？在这种情况下，考虑到更改 CSS 的限制，我不确定如何制作一个 HTML 结构，让 CSS 以第二个标题而不是第一个为目标。
@justinraczak 没有有效的 HTML 来匹配这个选择器。为什么你不能改变它？它来自哪里？
这是课堂练习的一部分。我得到了 CSS 选择器，需要制作将由它选择的 HTML。在转向 SO 之前，我花了很多时间试图弄清楚如何去做：/
那么答案就是没有标记。如果你的老师知道他们在教什么。或者他们犯了一个错误，需要将选择器更改为此答案中提到的内容。