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

原文由 Neophile 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

除了使用 !important 大多数答案都建议您使用之外，这是 CSS 特异性 的问题

这个概念

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

它是如何计算的？

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

在特异性相等的情况下，CSS 中找到的最新声明将应用于该元素。

一些经验法则

• 切勿 在站点范围的 CSS 上使用 !important。
• 仅 在覆盖站点范围或外部 css（例如来自 ExtJs 或 YUI）的特定于页面的 css 上使用 !important。
• 在编写插件/混搭时 切勿 使用 !important。
• 在考虑 !important 之前 总是 寻找一种使用特异性的方法

可以用 4 列优先级表示：

内联 = 1|0|0|0

编号 = 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>

---

现在这里是完整的片段一步一步

---

编号： 绿色

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

---

您可以 在此处 计算元素的特异性

---

笔记：

关于这个主题的必读

• 继承与级联
• CSS 特异性
• CSS 特异性的细节

原文由 dippas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个没有人提到的有趣的解决方案。

事实：

1. 您根本无法修改页面的 HTML - 没问题！

2. 您可以修改 CSS 文件，但开发人员稍后可能会再次修改它们并删除您所做的任何更改 - 不用担心。

3. 你不能/不想使用 Javascript 和 JQuery - 我没问题。

4. 您可以在服务器上添加更多文件 - 太棒了！

让我们为乐趣和利润做一些 .htacess 黑客攻击吧！

文档根 .htaccess 文件：

 Options +FollowSymlinks
RewriteEngine on
RewriteBase /

RewriteRule ^(.*?)css3.css(.*?) $1hackedCSS3.php$2 [L]

结果： hackedCSS3.php 代替 css3.css 在每次请求时都以静默方式提供。

参考： http://httpd.apache.org/docs/2.2/howto/htaccess.html

hackedCSS3.php文件：

 <?php

// Send the right header information!
header("Content-type: text/css; charset: UTF-8");

// Output the css3.css file
echo file_get_contents("css3.css");
?>

// Add your CSS here with any neat !important or override tricks (read: specificity)
div { ... }

奖金：

您可以扩展此解决方案以将所有三个 .css 文件包含在这个 .php 文件中（但仅提供 css3.css 并将 css1.css 和 css2.css 发送到 .htaccess 的黑洞），并使用巧妙的正则表达式来删除/修改那些开发人员的 CSS，而无需触及他们的任何文件。可能性是诱人的。

附录：

您能否更具体地说明将这些文件包含在何处？

.htaccess 文件应该在网站的 文档 根目录下。这是 www.example.com/index.html 加载 index.html 的地方

hackedCSS3.php 文件是否应该与其他 css 文件位于同一目录中？

它可以位于您在 .htaccess 文件中指定的任何目录中。文档根目录很好。改变

RewriteRule ^(.*?)css3.css(.*?) $1hackedCSS3.php$2 [L]

至

RewriteRule ^(.*?)css3.css(.*?) /folders/you/want/hackedCSS3.php$2 [L]

我们的 css 内容（您指定的地方 // 在此处添加您的 CSS…）应该在 html 样式标签内吗？

否。将该部分中的 CSS 代码视为 .css 文件。您不需要 <style> 标签。

原文由 Drakes 发布，翻译遵循 CC BY-SA 3.0 许可协议