Question

我们正在开发一个旨在嵌入第三方网站的小部件。它嵌入的方式是使用Javascript在页面的正文部分内动态注入div。

在没有任何或几个样式规则的页面上，小部件看起来很好。问题是：当主机页面有很多CSS时，我们看到网页覆盖的小部件样式规则所引起的各种视觉问题（让我们称之为主页）规则，如果窗口小部件没有明确定义这些规则，那么其中一些恰好胜过窗口小部件（因此窗口小部件从主机页面继承这些规则）。

在我看来，显而易见的解决方案是：为窗口小部件中的每个元素定义所有CSS规则。当我说ALL时，我的意思是所有CSS规则，如背景颜色等，适用于所有状态，如正常，专注。这显然是一种残酷的力量方法，并且可以为一个简单的小部件带来大量的工作。这看起来并不太聪明。

所以我的问题是：是否有任何明确的设施可以防止主页的样式弄乱小部件？

举一个例子，让我们说主页有一个像这样的CSS规则：

div {
  border-bottom: 1px solid green;
}

此规则将所有div的底部边框设置为透明。然后我们在我们的小部件中快速定义一大堆规则，除了我们忘记定义边界底部规则。在这种情况下，所有div的底部边框都是绿色的。

虽然为小部件添加边框底部规则以解决此特定问题是合理的，但真正的问题是：您无法控制主机页面上存在哪些规则，因此，为了确保安全，你必须为所有状态的窗口小部件中的所有元素定义所有规则，这对我来说非常麻烦且容易出错。

我们知道使用iframe可以免受这些问题的影响，但我们不想使用iframe，并且让它不参与讨论。

我们也很清楚使用的方法！在CSS规则中重要，以覆盖以前的规则。但是这仍然需要定义完整的CSS规则（即残酷的方法）。请不要讨论它。

感谢。

Answer 1

您正在寻找all: initial; CSS属性：

CSS all 简写属性重置所有属性，除了 unicode-bidi和direction，它们的初始值或继承值。 [MDN]

但它目前有low browser support。

以下是如何使用它的示例：

div div {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 10px;
  background: gold;
  border-bottom:5px solid green;
}
#wrap div {
  all: initial;
  display:block;
  height:10px;
  background:pink;
  margin:1px;
}

<div>
  <div></div>
  <div></div>
</div>
<div id="wrap">
  <div></div>
  <div></div>
</div>

制作小部件＆＃34;继承 - ＆＃34;

1 个答案: