採用全新的CSS檔案來覆蓋現有網站的樣式
P粉504920992
P粉504920992 2023-08-23 09:15:29
0
2
550
<p>我的網站目前有3個CSS文件,這些文件作為網站的一部分自動包含在內,我沒有訪問原始碼的權限,即網站的index.html文件,但我可以訪問我的網站的CSS文件。 </p> <p>我試圖使用自己的樣式來覆蓋我的網站的CSS文件,並創建一個新的CSS文件,其中包含我想要覆蓋的所有樣式。 </p> <p>我嘗試使用<code>@import url(css4.css)</code>,並將其放置在我的最後一個CSS檔案的頂部,但這不會覆蓋最後一個CSS檔案的樣式。 </p> <p>我該如何達成這個目標? </p> <pre class="brush:php;toolbar:false;"><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"></pre> <p><br /></p>
P粉504920992
P粉504920992

全部回覆(2)
P粉536532781

這裡有一個有趣的解決方案,沒有人提到過。

事實:

  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>標籤。

P粉022140576

除了使用大多數答案建議使用的!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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板