首頁  >  問答  >  主體

採用全新的CSS檔案來覆蓋現有網站的樣式

<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粉504920992P粉504920992447 天前531

全部回覆(2)我來回復

  • P粉536532781

    P粉5365327812023-08-24 00:53:13

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

    事實:

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

    回覆
    0
  • P粉022140576

    P粉0221405762023-08-24 00:23:36

    除了使用大多數答案建議使用的!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>

    回覆
    0
  • 取消回覆