我該如何使用：不要將某些特定的 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;
}

那應該做的工作。 那里不需要 * 登錄。