CSS Conflicting Style Sheets

问题:

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.

回答1:

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.

回答2:

The best way is definitely not to modify the selectors of the plugins unless you wrote the plugins yourself. You should modify your own classes/ids/css files to... not have conflicts.

回答3:

Make your CSS as specific as possible, I would not modify the plugin unless you are confident you know your way around.

回答4:

Wrap each section that you want to localise in its own div, with a specific and appropriate ID. Then mod each selector in the stylesheet to be preceded by #specificSectionID . With find/change in a decent code editor, you'll be done in five minutes. Example:

.headersection a {color: #DDD; background: transparent}
//becomes
#topSection .headersection a {color: #DDD; background: transparent}