CSS 系统地解决css中冲突的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2788466/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Systematically resolve conflicting styles in css
提问by Frank Michael Kraft
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 项目中有一些来自不同来源的样式表。我想协调它们。我需要一种风格，另一种风格。有没有一种工具或方法可以系统地解决风格冲突？我试过IE8开发者工具，是的，可以在每个元素的级别查看冲突。但是我有很多元素，所以如果我一个元素一个元素地做，我认为这需要太长时间。理论上可能有一个工具可以在设计时显示两个 css 文件的冲突？！？我认为这会为我节省很多时间。
采纳答案by David Yell
Have you tried this Firefox extension? Dust Me Selector http://www.brothercake.com/dustmeselectors/It makes removing redundant styles much easier.
你试过这个 Firefox 扩展吗？Dust Me Selector http://www.brothercake.com/dustmeselectors/它使删除多余的样式变得更加容易。
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.
否则，我可能会将所有样式放入一个文件中，尝试将相似的规则组合在一起，然后使用 Dust-Me 删除未使用的样式。
回答by Fenton
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.
CSS 没有冲突，它有级联。这个想法是，您可以定义适用于相同元素的多个规则，并且您放置样式的顺序反映了重要性 - 即，如果它最后出现，它将覆盖您描述为冲突的先前规则。
You should either...
你要么...
1) Decide which style sheet is the most important and put it second
1）决定哪个样式表是最重要的，并把它放在第二位
OR
或者
2) Re-write your styles to avoid the mess
2）重新编写你的风格以避免混乱
OR
或者
3) Mark important rules as !IMPORTANT
3) 将重要规则标记为 !IMPORTANT
回答by Ken Ray
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.
如果您在 FireFox 中查看站点，并使用 Firebug 扩展，那么您可以查看渲染页面中的每个元素，并且通过使用 firefox 中的“CSS”选项卡，您可以查看应用于的样式规则的级联那个元素，以及每个元素来自哪个 CSS 源文件。它还会向您显示哪些规则被覆盖。
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.
您仍然有“合理化”样式表的任务，并且可能有其他工具可以提供帮助。
回答by mgsloan
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
我整理了一个快速脚本，可以帮助检测来自多个来源的 CSS 规则的重叠：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.
正如所写的那样，它只适用于 URL 引用的样式表，但可以很容易地适应处理内联样式表。它使用两个正则表达式将样式表分成两组，然后扫描页面中的每个 DOM 节点，寻找两组样式表中的某些规则匹配的情况。
