Verwenden Sie eine neue CSS-Datei, um die Stile der vorhandenen Website zu überschreiben

Question

Meine Website verfügt derzeit über 3 CSS-Dateien, die automatisch als Teil der Website eingebunden werden. Ich habe keinen Zugriff auf den Quellcode, d. h. die index.html-Datei der Website, aber ich habe Zugriff auf das CSS von mein Website-Dokument.

Ich versuche, die CSS-Datei meiner Website mit meinen eigenen Stilen zu überschreiben und eine neue CSS-Datei zu erstellen, die alle Stile enthält, die ich überschreiben möchte.

Ich habe versucht, @import url(css4.css) zu verwenden und es über meiner letzten CSS-Datei zu platzieren, aber dadurch werden die Stile der letzten CSS-Datei nicht überschrieben.

Wie erreiche ich dieses Ziel?

<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">
<!-- Wie kann ich den folgenden Code nur mit CSS hinzufügen? -->
<link rel="stylesheet" type="text/css" href="newCSS4.css">

Answer 1

这里有一个有趣的解决方案，没有人提到过。

事实：

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

// 发送正确的头信息！
header("Content-type: text/css; charset: UTF-8");

// 输出css3.css文件
echo file_get_contents("css3.css");
?>

// 在这里添加您的CSS，使用任何有趣的!important或覆盖技巧（即：特定性）
div { ... }

额外奖励：

您可以将此解决方案扩展到此一个.php文件中的所有三个.css文件（但仅提供css3.css，并使用聪明的正则表达式删除/修改那些开发人员的CSS，而不触及任何文件。这些可能性令人心动。

补充：

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

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

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

为

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

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

Answer 2

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

可以用4列优先级来表示：

---

这是一个完整示例的CSS特异性代码片段

/*演示目的*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

/*CSS特异性*/

/* 特异性：0/1/0/0 */
#id {
  background-color: green
}

/* 特异性：0/0/1/0 */
.class {
  background-color: yellow 
}

/* 特异性：0/0/0/1 */
section {
  background-color: blue 
}
  
/* ------------ 覆盖内联样式 ----------- */

/*要覆盖内联样式，我们现在使用!important*/

/* 特异性  0/0/1/0 */

.inline {
  background-color: purple !IMPORTANT /*将变为紫色-最终结果*/ 
}

<article>
  <div id="id">
    <div class="class">
      <section>
        <div class="inline" style="background-color:red">
          <!--特异性 1/0/0/0 - 被"!important"覆盖-->
        </div>
      </section>
    </div>
  </div>
</article>