使用新的CSS文件覆盖当前网站的CSS

Question

我的网站目前已经被自动纳入该网站的一部分，3个CSS文件，我也 没有 访问源即 index.html的 网站 ，但我有
访问我的网站的CSS文件。

我正在尝试使用自己的样式来覆盖我的网站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">

Answer 1

除了使用!important大多数建议您使用的答案外，这还取决于
CSS的特定性

这个概念

特异性是浏览器决定哪些属性值与元素最相关并得到应用的方式。特异性仅基于由不同种类的选择器组成的匹配规则。

如何计算？

特异性是根据每种选择器类型计数的串联计算得出的。它是应用于相应匹配表达式的权重。

如果特异性相等，则将CSS中找到的最新声明应用于该元素。

一些经验法则

• 切勿 在站点范围的CSS上使用！important。
• 仅 在覆盖整个站点范围或外部CSS的特定于页面的CSS上使用！important（例如，来自ExtJs或YUI）。
• *在编写插件/混搭程序时， *切勿 使用！important。
• *甚至在考虑！important之前， *始终 寻找使用特异性的方法
  
  

可以由4列优先级表示：

内联 = 1 | 0 | 0 | 0

id = 0 | 1 | 0 | 0

类别 = 0 | 0 | 1 | 0

元素 = 0 | 0 | 0 | 1

从左到右，最高编号优先。

这是一个带有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

}



/* SPECIFICITY: 0/0/1/0 */

.class {

  background-color: yellow

}



/* SPECIFICITY: 0/0/0/1 */

section {

  background-color: blue

}



/* ------------ override inline styles ----------- */



/*to override inline styles we  now use !important */



/* SPECIFICITY  0/0/1/0 */



.inline {

  background-color: purple !IMPORTANT /*going to be purple - final result */

}


<article>

  <div id="id">

    <div class="class">

      <section>

        <div class="inline" style="background-color:red">

          <!--SPECIFICITY 1/0/0/0 - overridden by "!important -->

        </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>

覆写内联样式： 紫色

/*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>