html – 使用新的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">

除了使用！重要的是，大多数答案建议您使用，这是一个 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

可以由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