我该如何使用：不要将某些特定的 CSS 提供给父元素而不是子元素和子元素？

Question

你好这是代码

<div class="content-wrapper">
<span>Lorem</span>
<span>
  <strong style="font-size: 18px">
    sometext
    <span style="font-size: 12px">
      <em>ipsum</em>
    </span>
  </strong>
</span>
<span style="font-size: 14px">dolar sit amet</span>

<span class="input__math">
  <span class="katex">
    <span class="katex-mathml">
        <span style="font-size: 14px">
          <strong>x</strong>
          <sup style="font-size: 10px">2</sup>
        </span>
        +
        <span style="font-size: 14px">
          <strong>y</strong>
          <sup style="font-size: 10px">2</sup>
        </span>
        =
        <span>
          <span style="font-size: 16px">
            <strong>
              1
            </strong>
          </span>
        </span>
    </span>
  </span>
</span>

</div>

我正在尝试添加一些 CSS 像font-size: 20px;important; 在内容包装器class 的所有内容中，除了数学内容（如input__math class 中的任何内容）不应更改。 我试过这样

.content-wrapper *:not(.input__math *) {
  font-size: 20px !important;
}

但它不起作用，如果您有任何解决方案，请帮助

在这里，我用 inline-css 创建了一些演示内容，请检查

https://jsfiddle.net/u5xb49Lr/4/

Answer 1

如果我理解正确，您不希望 .input__math的字体大小或 all.input__math 的子元素的字体大小发生变化。

using:not(.input__math) 在这里不起作用，因为这不会针对 .input__math 的子元素（因为这些，虽然它们是 'input__math' 的子元素，但它们本身没有 class 'input__math' ）。

这是一个不同的解决方案。 您应用于子元素的 CSS 将覆盖应用于父元素的 CSS。 因此，您可以这样做：

.content-wrapper {
  font-size: 20px;
}

然后这个：

.input__math {
  font-size: <other font size>;
}

Answer 2

试试这个 CSS 风格：

.content-wrapper:not(.input__math) {
  font-size: 20px !important;
}

那应该做的工作。 那里不需要 * 登录。