CSS冲突样式表 [英] CSS Conflicting Style Sheets

问题描述

我有两个样式表，这些样式表在多个方面相互冲突。因为我正在使用5,6，并且在某些情况下9或10个完整的插件，每个插件都带有三或四个样式表，以及我自己的冲突，随处可见。解决这个问题的最好方法是什么？是唯一的选择去修改所有插件的选择器吗？

编辑：问题是所有的插件使用他们自己的样式表相互冲突。如果不修改所有的选择器，最佳但不可能的解决方案将很容易将样式表本地化到页面的某些部分。 解决方案

请记住样式重写的一些非常基本的提示：首先，尽量避免使用其他来源的泛型类名和id。

p>

其次，！重要的可以重写样式，但只能以有意义的方式使用......

第三，css的cascade部分的层次结构是down - > out：

所以

  #header a {
 color：#fff; 
} 
 
 #header div a {
 color：＃000; 
} 
 
 #header div.some-class a.active {
 color：＃ff0000; 
 
 
 
 
 
 $ b 
底部选择器无论放置在何处都会优先考虑，因为它的目标是特别是与可怕的选择器链。因此，也许你需要以减少被其他来源覆盖的机会的方式编写你的css。
 
I have two style sheets which conflict with each other on several counts. Because I'm using 5, 6, and in some cases 9 or 10 complete plug-ins, each with three or fours style sheets, along with my own, conflicts arise everywhere. What is the best way to fix this problem? Is the only option to go in and modify the selectors of all of the plug-ins?

Edit: The problem is that all the plug-ins use their own style sheets which conflict with each other. The optimal, but probable impossible without modifying all the selectors, solution would to easily localize the style sheets to certain parts of the page.
解决方案
keep in mind some very basic tips for style overriding:

First, try to avoid generic class names and id's that are certain to be used by other sources.

Second, !important can override styles, but should only be used in ways that make sense...

Third, the hierarchy of the "cascade" part of css is down -> out:

So
#header a{
    color:#fff;
}

#header div a{
    color:#000;
}

#header div.some-class a.active{
    color:#ff0000;
}
The bottom selector will take priority no matter where it is placed because it is targeted specifically with a horrid chain of selectors. So perhaps you need to write your css in a way that reduces the chances of being overwritten by other sources.

                        
这篇关于CSS冲突样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！