系统地解决CSS中样式冲突
我的网络项目中有一些来自不同来源的样式表。我想让他们和谐相处。 我需要其中一些样式，另一些样式。 有没有一种工具或方法可以系统地解决风格冲突？ 我尝试了 IE8 开发人员工具，是的，可以在每个元素级别查看冲突。 但我有很多元素，所以如果我一个元素一个元素地做，我认为这需要很长时间。 理论上可能有一个工具可以在设计时显示两个 css 文件的冲突？！？我想这会节省我很多时间。
I have some stylesheets from different sources in my web project. I want to harmonize them.
Some styles I need from the one, some from the other.
Is there a tool or method how to systematically resolve style conflicts?
I tried IE8 developer tool, and yes, it is possible to view conflicts at the level of each element.
But I have many elemens, so if I do it element by element I think this takes too long.
Theoretically there could be a tool that shows conflicts of two css files at design time?!? I think this would save me a lot of time.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您是否尝试过这个 Firefox 扩展，Dust-Me Selectors (http://www.brothercake.com/dustmeselectors/< /a>）？它使删除多余的样式变得更加容易。
否则，我可能会将所有样式放入一个文件中，尝试将类似的规则组合在一起，然后使用 Dust-Me 删除未使用的样式。
Have you tried this Firefox extension, Dust-Me Selectors (http://www.brothercake.com/dustmeselectors/)? It makes removing redundant styles much easier.
Otherwise, I'd probably pop all the styles into one file, trying to group together similar rules, and then use Dust-Me to remove the unused ones.
CSS 没有冲突，它有级联。这个想法是，您可以定义适用于相同元素的多个规则，并且您放置样式的顺序反映了重要性 - 即，如果它出现在最后，它将覆盖以前的规则，其中存在您所描述的冲突。
您应该...
1) 确定哪个样式表最重要并将其放在第二位
或
2) 重新编写样式以避免混乱
或
3) 将重要规则标记为！重要
CSS doesn't have conflicts, it has cascades. The idea is that you CAN define multiple rules that apply to the same elements and the order in which you place the styles reflects an importance - i.e. if it appears last, it will override previous rules where there is something you describe as a conflict.
You should either...
1) Decide which style sheet is the most important and put it second
OR
2) Re-write your styles to avoid the mess
OR
3) Mark important rules as !IMPORTANT
如果您在 FireFox 中查看站点并使用 Firebug 扩展，则可以查看渲染页面中的每个元素，并通过使用 Firefox 中的“CSS”选项卡，您可以看到应用于的样式规则级联该元素，以及每个元素来自哪个 CSS 源文件。它还会向您显示哪些规则被覆盖。
这有助于确定每个特定规则的来源以及被覆盖的内容。
您仍然有“合理化”样式表的任务，并且可能还有其他工具可以提供帮助。
If you view the site in FireFox, and use the Firebug extension, you can then look at each element in your rendered page, and by using the "CSS" tab in firefox, you can see the cascade of style rules that are being applied to that element, and from what CSS source file each came from. It will show you what rules are being overridden, too.
This is helpful in determining just where each particular rule is coming from, and what is being overridden.
You still have the task of "rationalizing" your style sheets, and there may be other tools that can help in that.
我整理了一个快速脚本，有助于检测多个来源的 CSS 规则的重叠： https:// github.com/mgsloan/css-overlap
正如所写，它仅适用于 URL 引用的样式表，但可以很容易地进行调整以处理内联样式表。它使用两个正则表达式将样式表分成两组，然后扫描页面中的每个 DOM 节点，查找两组样式表中的某些规则匹配的情况。
I threw together a quick script that can be helpful for detecting overlap of CSS rules from multiple sources: https://github.com/mgsloan/css-overlap
As written it only works for stylesheets referenced by URL, but can very easily be adapted to handle inline stylesheets. It uses two regexes to split the stylesheets into two sets, and then scans every DOM node in your page looking for cases where some rules from both sets of stylesheets match.