防止儿童的默认 html 样式被覆盖答案

【问题标题】：Preventing children's default html styles being overridden防止儿童的默认 html 样式被覆盖
【发布时间】：2021-08-10 17:58:10
【问题描述】：

div {
  height: 400px;
  cursor: pointer;
  font-family: sans-serif;
}

<div>
  div has pointer and sans-serif font
  <p>and paragraph also has it</p>
  <code>but code element doesn't have sans-serif font but pointer.</code>
</div>

p 元素默认具有光标text 和serif 作为字体系列。两者都被覆盖。
code 元素默认将光标 text 和 monospace 作为字体系列。只有光标已被覆盖。

为什么会这样？在 code 元素中，font-family 未被覆盖。为什么？如何在某些选定元素中设置默认 html 样式？（p 和 code 元素在这里）

显然，即使all: revert 也不起作用！

div {
  height: 400px;
  cursor: pointer;
  font-family: sans-serif;
}

p {
  all: revert;
}

code {
  all: revert;
}

<div>
  div has pointer and sans-serif font
  <p>and paragraph also has it</p>
  <code>but code element doesn't have sans-serif font but pointer.</code>
</div>

all: initial 有效，但我不想应用原始 CSS 实现。我希望应用用户代理样式表规则。我使用了revert，但无济于事。

【问题讨论】：

为什么不单独定义差异？
@Ugene 因为这会产生大量冗余代码，这些代码已经在用户代理样式表中。
但是只要
和标签被
封装。您的 revert, unset 仍将返回为标签定义的那些。 Initial 有效，因为它将样式返回到其最底层的形式。
@Ugene 是否有某种方法可以考虑 UA 样式表并忽略它所拥有的任何父级，并从 UA 样式表中应用样式？喜欢在这里忽略div 样式？


    
        
        
            
                
                使用类或 ID 将使您的生活更轻松。这样你就不需要接触基本标签样式了。

【解决方案1】：

根据 MDN：

默认情况下，内容文本使用用户代理的默认等宽字体。

和：

可以为代码选择器定义一个 CSS 规则来覆盖浏览器的默认字体。用户设置的首选项可能会采用优先于指定的 CSS。

所以您确实需要具体指定所需的字体。如果担心正确的设置未结转/将来可能会更改，您可以将其定义为 CSS 变量，因此只需在一处更改其值。

div {
  height: 400px;
  cursor: pointer;
  --font: sans-serif;
  font-family: --font;
}

p {
  all: revert;
}

code {
  all: revert;
  font-family: --font;
  
}

<div>
  div has pointer and sans-serif font
  <p>and paragraph also has it</p>
  <code>and the code element also has sans-serif</code>
</div>

【讨论】：

我只是想要一个属性或其他东西来重置应用于元素的所有样式并将其恢复为默认形式，如 UA 样式表指定的那样。没有什么可以做到的吗？光标似乎仍然是您的代码的指针...
抱歉，我以为你想要的就是这样。我很快就会删除这个答案。