如何从身后装载的css继承？

  • Z时代
  • 2024-01-10
  • 分类：问答

我制作了一个应用程序，它在文档的顶部有一个元素。 在这个元素之后，我有另一个div。如何从身后装载的css继承？

当我按下位于元素1中的一个按钮时，一个网站html内容被加载到第二个div中，将它的所有脚本和css注入到文档本身中。

问题是，当这些CSS干扰我的元素1 CSS。 F.e：网站加载一个改变身体边距的css：

body{margin:0 8px!important}

如何在我的元素1上动态地避免这种影响？

我不能这样做：

#element1{ 
    margin: 0 -8px; 
}

的元素，因为它不是动态的，其他任何网站可以使用其他参数。

还有其他方法吗？

回答：

有在这种情况下，两个可能的解决方案（这是我所知道的）：

第一种选择 - 使用iframe

有你的第二个div的iframe元素，您可以加载其他HTML网站放入iframe。这样，脚本和CSS就不会应用到主网站上，换句话说：iframe中竞争HTML的脚本和CSS仅限于iframe。

<html> 
    <body> 
    <div class='element'> 
     <div><iframe><!--this is where other website fills in --> </iframe></div> 
    </div>  
    </body> 
</html>

第二个方案 - 使用CSS的优先级规则

按照CSS规则，将最后一个引用的HTML文档将具有最高优先级的文件。因此，您的HTML必须如下所示：

<html> 
    <body> 
    <div class='element'> 
     <div> <!--this is where other website fills in --> </div> 
    </div> 
    <!-- your custom CSS goes here.--> 
    </body> 
</html>

从技术上讲，将自定义CSS放在HTML层次结构下的任何位置都可以。

注：因此将您的CSS的底部可能会影响UI如果页面包含很多其它的HTML，由于CSS在底部参考，您的HTML将首先装载无任何风格长相丑陋，直到该CSS被加载。你可以做的只是那些应该覆盖其他网站样式的CSS，并将它们放置在不同的文件中，并在底部引用这个新文件，并将其常规文件放在顶部节头本身中。

以上是 如何从身后装载的css继承？ 的全部内容， 来源链接： utcz.com/qa/266272.html

回到顶部