4

刚刚从设计团队获得了一个带有 css 的新网页，用于弹出一个精美的框；

他们不知道或不关心寻找现有的类和ID；

我需要一个没有任何工作的解决方案IFRAME

问题是主 css 文件中已经有超过 20.000 行 css 行，并且在某些时候某些内容会被覆盖，整个网站都会大爆炸！

这个新网页有很常见class的id名字，我说的是近100个带有css属性的标签；

我想知道encapsulate这个新的 css 属性和未来的属性是否有方法；

如果有办法做到这一点，怎么能做到呢？

有了这个网页，我很幸运，我粘贴了带有内容的标签，就在此之前，我使用了style type"text/css'标签；但我不会永远幸运；

仅仅因为我们获得了由不同人编写的 css 代码的网页，如果某些属性、名称或 id 相互交叉，那么创建新的 css 类对我来说是不公平的。

我现在有大约 10 个类，a tag而且我大部分的属性是相同的；

4

1 回答 1

3

使用有针对性的规则，让级联为您处理。将您的弹出窗口放在一个包装器中，其中包含您喜欢的名称的详细信息。

<div id="myPopupDivWithCommonIds">
    <!-- rest of popup -->
</div>

并将您的 css 规则定位到该 div。

#myPopupDivWithCommonIds .error { color: bright-pink; }
#myPopupDivWithCommonIds #main { width: 93.21%; }

等等等等。这会处理 css 规则并防止你的新东西溢出。您必须注意确保没有其他规则会流下来；最好的方法是明智地覆盖任何已定义的属性（Pekka 所说的）。您也可以对其进行核对并包含自定义的“重新启动”或“引导”样式表，然后再次将其所有规则重新定位到您的新弹出 div （就像您说的，20k 行 css 很难；但包括另一个文件通过附加 #id 选择器来设置针对您的 div 的重置规则会有所帮助）。

哦，这仍然没有解决重复 id 在技术上是无效标记的问题，并且很可能会干扰您尝试在该页面上运行的任何 JavaScript。

如果这听起来像一团糟，那么它就是。您的开发人员和设计人员已经做到了这一点，如果没有进行认真的重构，您将不会回到干净的解决方案。对于您的用例而言，iFrame 可能看起来像是一个 hack 或不可能的，但它确实会清理很多您正确预见的问题。

于 2013-02-12T20:40:24.357 回答