时间戳

首页 > 解决方案 > 将小部件嵌入未知站点时如何保护样式？

html - 将小部件嵌入未知站点时如何保护样式？

问题描述

假设我们建立了一个新闻网站 SupaNews，我们希望允许人们在他们的网站中嵌入新闻流。

首先想到的是每个 CSS 规则都应该以唯一的前缀作为前缀supanews

<div class="supanews">
  <ul class="supanews-list">
    <li class="supanews-item">Zerg found on Tarsonis!</li>
    <li class="supanews-item">Protoss mothersip noticed in Koprulu sector</li>
  </ul>
<div>

但是，元素仍然从主站点继承样式，它会破坏标记。有什么办法可以防止这种情况发生吗？也许一些特殊的重物reset.css将应用于.supanews部分？

另外，我想知道是否有可能避免为每个 CSS 规则添加前缀，并以某种方式告诉浏览器其中的所有内容都有.supanews范围？HTML 看起来像下面的代码，浏览器应该知道.list内部.supanews不应继承与.list外部 HTML 相同的规则：

<div class="supanews">
  <ul class="list">
    <li class="item">Zerg found on Tarsonis!</li>
    <li class="item">Protoss mothersip noticed in Koprulu sector</li>
  </ul>
<div>

也可以使用iframe，它会提供完美的隔离，但我想探索其他方式。如果它只适用于假设 97% 的网站，那也没关系。

标签： htmlcss

解决方案

推荐阅读