Gunakan fail CSS baharu untuk menulis ganti gaya tapak web sedia ada

Question

Tapak web saya pada masa ini mempunyai 3 fail CSS yang disertakan secara automatik sebagai sebahagian daripada tapak web, saya tidak mempunyai akses kepada kod sumber, iaitu fail index.html tapak web, tetapi saya mempunyai akses kepada CSS untuk dokumen laman web saya.

Saya cuba mengatasi fail CSS tapak web saya dengan gaya saya sendiri dan mencipta fail CSS baharu yang mengandungi semua gaya yang ingin saya ganti.

Saya cuba menggunakan @import url(css4.css) dan meletakkannya di atas fail CSS terakhir saya tetapi ini tidak menimpa gaya fail CSS terakhir .

Bagaimanakah saya boleh mencapai matlamat ini?

<link rel="stylesheet" type="text/css" href="currentCSS1.css">
<link rel="stylesheet" type="text/css" href="currentCSS2.css">
<pautan rel="stylesheet" type="text/css" href="currentCSS3.css">
<!-- Bagaimanakah saya boleh menambah kod di bawah menggunakan CSS sahaja? -->
<link rel="stylesheet" type="text/css" href="newCSS4.css">

Answer 1

Berikut adalah penyelesaian menarik yang tiada siapa yang nyatakan.

Fakta:

1. Anda tidak boleh mengubah suai HTML halaman - Tiada masalah!

2. Anda boleh mengubah suai fail CSS, tetapi pembangun boleh mengubah suainya semula kemudian dan mengalih keluar sebarang perubahan yang anda buat - Jangan risau.

3. Anda tidak boleh/tidak mahu menggunakan Javascript dan JQuery - Tiada masalah untuk saya.

4. Anda boleh menambah lebih banyak fail pada pelayan - Hebat!

Jom lakukan penggodaman .htacess untuk keseronokan dan keuntungan!

Fail

.htaccess dalam direktori akar dokumen:

Options +FollowSymlinks
RewriteEngine on
RewriteBase /

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

Hasil: hackedCSS3.php dihidangkan secara senyap dan bukannya css3.css pada setiap permintaan.

Rujukan: http://httpd.apache.org/docs/2.2/howto/htaccess.html

fail CSS3.php yang digodam:

<?php

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

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

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

Ganjaran tambahan:

Anda boleh memanjangkan penyelesaian ini kepada fail .php文件中的所有三个.css ini (tetapi hanya menyajikan css3.css) dan menggunakan regex yang bijak untuk mengalih keluar/mengubah suai CSS pembangun tersebut tanpa menyentuh sebarang fail

Ditambah:

Fail

.htaccess hendaklah terletak dalam direktori documentsroot tapak web anda. Di sinilah www.example.com/index.html memuatkan index.html.

Ia boleh didapati dalam mana-mana direktori yang anda tentukan dalam fail .htaccess. Akar dokumen juga berfungsi. Berubah

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

untuk

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

Tidak perlu. Anggap bahagian kod CSS ini sebagai fail .css. Anda tidak memerlukan tag <style>.

Answer 2

Selain menggunakan !important seperti yang dicadangkan oleh kebanyakan jawapan, ini ialah soalan tentang Kekhususan CSS

boleh diwakili oleh 4 lajur keutamaan:

---

Berikut ialah coretan kod khusus CSS bagi contoh lengkap

/*演示目的*/
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>