我在我的网络项目中有一些来自不同来源的样式表。我想要协调它们。 有些样式我需要从一个来源，有些则需要从另一个来源。 是否有工具或方法可以系统地解决样式冲突？ 我尝试了IE8开发者工具，可以在每个元素的级别上查看冲突。 但是我有很多元素，如果我一个个解决会花费太长时间。 理论上，在设计时可能会有显示两个CSS文件冲突的工具！？我认为这将节省我很多时间。
4个回答
9
您尝试过这个Firefox扩展程序Dust-Me Selectors吗(http://www.brothercake.com/dustmeselectors/)? 它可以更轻松地删除冗余的样式。
否则，我可能会将所有样式放入一个文件中，尝试将相似的规则分组，然后使用Dust-Me来删除未使用的内容。
- David Yell
2
dust me 帮了很大的忙。还有 IE8 开发工具。 - Frank Michael Kraft
这个链接已经失效了。您提到的插件的名称是什么？ - Joris Kinable
6
CSS没有冲突，只有级联。这意味着你可以定义适用于同一元素的多个规则，并且你放置样式的顺序反映了其重要性 - 如果它出现在最后，它将覆盖先前的规则，其中存在你所描述的冲突。
你应该选择以下方案之一：
1）确定哪个样式表最重要并将其放在第二个位置
或者
2）重新编写样式以避免混乱
或者
3）将重要规则标记为！IMPORTANT
你应该选择以下方案之一：
1）确定哪个样式表最重要并将其放在第二个位置
或者
2）重新编写样式以避免混乱
或者
3）将重要规则标记为！IMPORTANT
- Fenton
2
9因为你认为人们不能信任知道这个功能吗？你想保守秘密吗？虽然使用
!IMPORTANT 不被鼓励，因为它与级联规则的概念相冲突，但我们正在谈论尝试整合来自多个来源的许多规则的特定情境，而在这种情况下，!IMPORTANT 绝对是你需要考虑的工具。 - Fenton2通常使用!important只是把问题藏起来，最终你会得到更多的问题，而这些问题以后将无法解决，也就是问为什么CSS没有!非常重要... - Eric Grange
1
如果您在 FireFox 中查看网站并使用 Firebug 扩展，那么您可以查看渲染页面中的每个元素，并通过使用 Firefox 中的“CSS”选项卡，查看应用于该元素的样式规则级联以及每个规则来自哪个 CSS 源文件。它还会显示被覆盖的规则。
这有助于确定每个特定规则的来源和被覆盖的内容。
您仍然需要“合理化”您的样式表，可能还有其他工具可以帮助完成这项任务。
- Ken Ray
0
我写了一个快速脚本，可以帮助检测来自多个来源的CSS规则的重叠：https://github.com/mgsloan/css-overlap
目前它只适用于通过URL引用的样式表，但很容易适应处理内联样式表。它使用两个正则表达式将样式表分成两组，然后扫描页面中的每个DOM节点，查找两组样式表中某些规则匹配的情况。
- mgsloan
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接