使用新的CSS文件覆盖当前网站的CSS [英] Use a new CSS file to override current website's CSS
问题描述
我的网站目前有3个CSS文件，这些文件会自动包含在网站中，而且我不可以访问源代码，即 index.html 网站，但我确实可以访问我的网站的CSS文件。
我试图使用自己的样式来覆盖我的网站CSS文件，并创建一个新的CSS文件，其中包含我想在我的网站上覆盖的所有样式。
我已经尝试使用 @import url（css4.css）我的最后一个CSS文件，但不会覆盖最后一个CSS文件的样式。
如何实现？
< link rel = stylesheettype =text / csshref =currentCSS1.css>
< link rel =stylesheettype =text / csshref =currentCSS2.css>
< link rel =stylesheettype =text / csshref =currentCSS3.css>
<！ - 如何通过使用CSS添加下面的内容？ - >
< link rel =stylesheettype =text / csshref =newCSS4.css>除了使用！重要的 / code>，大多数答案建议您使用，这是一个 CSS specific
概念
特定性是浏览器决定哪个属性
值与元素最相关并可以应用的方法。
特异性仅基于由不同种类的
选择器组成的匹配规则。
如何计算？
特殊性是根据
每个选择器类型的计数连接计算的。它是应用于
对应匹配表达式的权重。
在特殊性相等的情况下，CSS中找到的最新声明应用于元素
一些经验法则
- 从不
仅使用！在页面特定的css重要，覆盖站点范围或外部css（从ExtJs或YUI的
- 始终使用！
在考虑之前寻找使用特异性的方法！
可以由4列优先级表示：
内联 = 1 | 0 | 0 | 0
id =
class = 0 | 0 | 1 | 0
strong>元素 = 0 | 0 | 0 | 1
从左到右，
这是一个包含完整示例的代码段CSS特性
/ * demo purpose * / body {margin：0 ; padding：0} div，article {min-height：200px; height：100％; width：100％} / * CSS Specificity * // * SPECIFICITY 0/1/0/0 * /＃id {background-color：绿色/ *将变成绿色 - 被样式黄色覆盖* /} / * SPECIFICITY 0/0/1/0 * /。class {background-color：yellow / *将变成黄色 - * SPECIFICITY 0/0/0/1 * / section {background-color：blue / *将变成蓝色 - 被样式red覆盖* /} / * ------------只是为了删除inline demo ----------- * // *现在删除内联元素的背景，我们应该使用！重要和父级为了使它更具体/ * SPECIFICITY 1/0/0/1 * / section> ; div {background-color：purple！重要/ *将变为紫色 - 最终结果* /}
< article> < div id =id> < div class =class> < section> < div style =background-color：red> <！ - SPECIFICITY 1/0/0/0 - 被样式紫色覆盖 - > < / div> < / section> < / div> < / div>< / article>
现在这里是一个完整的代码段
ID： GREEN
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>
CLASS： YELLOW >
/ *示例目的* / 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>
ELEMENT： BLUE >
/ *演示目的* / body {margin：0; padding：0} div，article {min-height：200px; height：100％; width：100％} / * CSS Specificity * // * SPECIFICITY 0/0/0/01 * / section {background-color：blue}
文章> < div id =id> < div class =class> < section> < div> < / div> < / section> < / div> < / div>< / article>
INLINE STYLE： RED
* demo * / body {margin：0; padding：0} div，article {min-height：200px; height：100％; width：100％}
pre class =snippet-code-html lang-html prettyprint-override> < 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：
文章> < div id =id> < div class =class> < section> < div style =background-color：red> <！ - SPECIFICITY 1/0/0/0 - > < / div> < / section> < / div> < / div>< / article>
您可以计算您的元素的特异性这里
注意：
em> A必须阅读此主题
My website has currently 3 CSS files that are automatically included as a part of the website and I do not have access to the source i.e. index.html of the website but I do have access to the CSS files of my website.
I am trying to use my own style to override my websites CSS files and create a new CSS file that would contain all the styling that I would like to overwrite on my website.
I have tried using @import url(css4.css) and I have placed that at the top of my last CSS file but that wouldn't overwrite the last CSS file's styling.
How can I achieve this?
<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">
解决方案 Besides using !important that most answers are advising you to use, this is a matter of CSS specificity
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
can be represented by 4 columns of priority:
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.
Here is a snippet with a Full example of a CSS specificity
/*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>
Now here is the Full snippet step by step
ID: GREEN
/*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>
CLASS: YELLOW
/*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>
ELEMENT: BLUE
/*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>
INLINE STYLE: RED
/*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>
You can calculate the specificity of your element(s) here
Note:
A must read on this subject
这篇关于使用新的CSS文件覆盖当前网站的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
