是否可以在不知道它们是啥的情况下覆盖所有 css 样式？ [复制]

Posted 2023-03-21

【中文标题】是否可以在不知道它们是啥的情况下覆盖所有 css 样式？ [复制]

【英文标题】：Is it possible to override ALL css styles without knowing what they are? [duplicate]是否可以在不知道它们是什么的情况下覆盖所有 css 样式？ [复制]

【发布时间】：2017-11-14 07:26:05

【问题描述】：

我正在编写一个需要插入多个 CMS 平台的 html sn-p。因此，我不提前知道哪些 CSS 属性将从 CMS 样式表应用于我的 HTML 中的各种标签。

有什么方法可以在 HTML 中使用内联样式来告诉它忽略/重置样式表中在标签级别应用的所有声明的样式？

如果我不能使用内联样式来做到这一点，可以使用外部样式表来完成吗？

【问题讨论】：

你也许可以使用all: unset;codepen.io/anon/pen/NgrGqx

实际上看起来它可以工作，我似乎也可以内联执行此操作。 codepen.io/anon/pen/XgKmXV - 你应该把它作为答案:)

@Joey 你可能想在使用它之前检查对它的支持developer.mozilla.org/en/docs/Web/CSS/all

all 的问题是浏览器支持——在任何版本的 IE 或 Edge 中都不好。 （我认为 MDN 页面已经过时了；Safari 现在支持它：caniuse.com/#search=all ）不过，这是做你想做的唯一真正的方法，而不是在自己的 iframe 中沙箱化 sn-p。

这里的最佳答案也显示了在 IE 中执行此操作的方法：***.com/questions/15901030/…

【参考方案1】：

根据浏览器支持，您可以使用all CSS 属性。这里是参考https://developer.mozilla.org/en/docs/Web/CSS/all

a 
  color: red;


li 
  list-style: square;


div 
  border: 1px solid black;
  padding: 1em;


div:first-child * 
  all: unset;

<div>
  <a href="#">link</a>
  <ul>
    <li>asdf</li>
  </ul>
</div>

<div>
  <a href="#">link</a>
  <ul>
    <li>asdf</li>
  </ul>
</div>

【讨论】：

我也可以在 IE 中使用最佳答案：***.com/questions/15901030/… - 我想这意味着这是一个重复的问题：P

@Joey 注意你的语言。这不是 reddit。

我也不喜欢 reddit。我是 4chan 用户。