我试图使用自己的风格来覆盖我的网站CSS文件，并创建一个新的CSS文件，其中包含我想在我的网站上覆盖的所有样式。
我已经尝试使用@import url(css4.css)，我把它放在我最后一个CSS文件的顶部，但不会覆盖最后一个CSS文件的样式。
我该如何实现？
<link rel="stylesheet" type="text/css" href="currentCSS1.css"> <link rel="stylesheet" type="text/css" href="currentCSS2.css"> <link rel="stylesheet" type="text/css" href="currentCSS3.css"> <!-- How to add this below just by using CSS? --> <link rel="stylesheet" type="text/css" href="newCSS4.css">
解决方法
The concept
Specificity is the means by which a browser decides which property
values are the most relevant to an element and gets to be applied.
Specificity is only based on the matching rules which are composed of
selectors of different sorts.How is it calculated?
The specificity is calculated on the concatenation of the count of
each selectors type. It is a weight that is applied to the
corresponding matching expression.In case of specificity equality,the latest declaration found in the CSS is applied to the element.
Some rules of thumb
- Never use !important on site-wide css.
- Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).
- Never use !important when you’re writing a plugin/mashup.
- Always look for a way to use specificity before even considering !important
可以由4列优先级表示：
inline = 1|0|0|0
id = 0|1|0|0
class = 0|0|1|0
element = 0|0|0|1
Left to right,the highest number takes priority.
这是一个具有CSS特异性的完整示例的片段
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 0/1/0/0 */
#id {
background-color: green/*going to be green - overridden by style yellow */
}
/* SPECIFICITY 0/0/1/0 */
.class {
background-color: yellow /*going to be yellow - overridden by style blue */
}
/* SPECIFICITY 0/0/0/1 */
section {
background-color: blue /*going to be blue - overridden by style red */
}
/* ------------ just to remove inline demo ----------- */
/*now remove background for inline elements we should
use !important and a parent in order to make it more specific
/* SPECIFICITY 1/0/0/1 */
section > div {
background-color: purple !IMPORTANT /*going to be purple - final result */
}
<article>
<div id="id">
<div class="class">
<section>
<div style="background-color:red">
<!--SPECIFICITY 1/0/0/0 - overridden by style purple -->
</div>
</section>
</div>
</div>
</article>
现在这里是完整的代码片段
ID：绿色
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 0/1/0/0 */
#id {
background-color: green
}
<article>
<div id="id">
<div class="class">
<section>
<div>
</div>
</section>
</div>
</div>
</article>
类：黄
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 0/0/1/0 */
.class {
background-color: yellow
}
<article>
<div id="id">
<div class="class">
<section>
<div>
</div>
</section>
</div>
</div>
</article>
元素：蓝色
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 0/0/0/1 */
section {
background-color: blue
}
<article>
<div id="id">
<div class="class">
<section>
<div>
</div>
</section>
</div>
</div>
</article>
在线样式：红色
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
<article>
<div id="id">
<div class="class">
<section>
<div style="background-color:red">
<!--SPECIFICITY 1/0/0/0 -->
</div>
</section>
</div>
</div>
</article>
OVERRIDDEN INLINE STYLE：PURPLE
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 1/0/0/1 */
section > div {
background-color: purple !IMPORTANT
}
<article>
<div id="id">
<div class="class">
<section>
<div style="background-color:red">
<!--SPECIFICITY 1/0/0/0 -->
</div>
</section>
</div>
</div>
</article>
您可以计算您的元素here的特异性
注意：
A必须阅读这个主题
> Inheritance and cascade
> CSS Specificity
> Specifics on CSS Specificity
