採用全新的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">
<!-- 如何只使用CSS將下面的程式碼加入？ -->
<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(.*?) hackedCSS3.php [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(.*?) hackedCSS3.php [L]

為

RewriteRule ^(.*?)css3.css(.*?) /folders/you/want/hackedCSS3.php [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>