删除所有继承的 CSS 属性答案

【问题标题】：remove all inherited css properties删除所有继承的 CSS 属性
【发布时间】：2022-01-22 02:11:05
【问题描述】：

我有一个将通过 javascript 添加到网站的弹出窗口。我不知道这些网站会应用什么样的样式。

示例网站已添加当前样式：

h3 {
color: blue;
border: 5px solid red;
font-size: 24px;
}

添加到网站正文的我的弹出窗口有：

 PopupText = styled.h3`
  font-size: 16px;
  color: black;
`;

这意味着 font size 和 color 是我声明的，但无论如何都会添加边框，有没有办法删除添加的额外 css 属性，还是为了防止网站添加的其他样式？

总而言之，我希望我的弹出窗口看起来一样，无论它添加到哪里。截至目前，当我将其添加到网站时，它会根据网站上的样式而变化

【问题讨论】：

你能把你的代码变成一个我们可以运行的工作 sn-p 因为@ArashHatami (all: unset;) 给出的答案看起来应该可以工作，我无法重现你的问题。跨度>

【解决方案1】：

您可以像这样使用all 属性：

.class {
  all: unset;
}

查看here

【讨论】：

【解决方案2】：

我认为您需要使用 iframe 标签进行包装

【讨论】：

【解决方案3】：

您可以使用:not() 选择器来实现：如果您的弹出元素有一个类（可能是这种情况），您可以修改h3 的常规css 规则，如下所示：

*:not(.yourpopupclass) h3 {
  color: blue;
  border: 5px solid red;
  font-size: 24px;
}

这将影响任何h3 元素，它是任何东西的子元素（即body），除非它是具有.yourpopupclass 类的元素的子元素（即在您的弹出窗口中）。

如果弹出窗口没有类，但有一个 ID，则同样可以使用 ID。

【讨论】：

我不确定这是不是正确的方法，我正在添加一个弹出窗口，它将 css 捆绑到任何给定的网站我无法访问该网站，也不知道正在应用什么样式，我想无论添加到何处，都可以实现与弹出窗口相同的外观
啊，好吧，如果你不能修改网站的原始CSS，使用这种方法是不可能的。我可以推荐的唯一其他方法 - 对于您的弹出 h3 - 是为您可以想到的 all 属性添加 css 设置（即字体大小、样式、颜色、粗细、行高、边框、 padding、margin、background 等），甚至可以在每个元素中添加!important，以覆盖任何可能从网站样式表继承的内容。