使用沒有源訪問權(quán)限的新文件覆蓋當(dāng)前網(wǎng)站 CSS

簡介

自定義在不修改源代碼的情況下實(shí)現(xiàn)網(wǎng)站的外觀可能具有挑戰(zhàn)性。本問題探討了如何通過創(chuàng)建一個(gè)新的 CSS 文件來覆蓋在源級別無法訪問的網(wǎng)站上現(xiàn)有的 CSS 文件來實(shí)現(xiàn)此目的。

CSS 特異性的概念

至要了解如何覆蓋現(xiàn)有 CSS，必須掌握 CSS 特殊性的概念。它根據(jù)規(guī)則中使用的選擇器確定哪些 CSS 聲明適用于元素。特異性計(jì)算如下：

• 內(nèi)聯(lián)：1 | 0 | 0 | 0
• ID：0 | 1 | 0 | 0
• 班級：0 | 0 | 1 | 0
• 元素：0 | 0 | 0 | 1

使用新 CSS 文件覆蓋當(dāng)前 CSS

要覆蓋現(xiàn)有 CSS 文件，請考慮以下方法：

1. 內(nèi)聯(lián)樣式（特異性：1 | 0 | 0 | 0）：直接添加到 HTML 元素的內(nèi)聯(lián)樣式具有最高的特異性。但是，由于其適用性有限，不建議在網(wǎng)站范圍內(nèi)覆蓋它們。
2. ID 選擇器（特異性：0 | 1 | 0 | 0）：ID 選擇器比類具有更高的特異性或元素選擇器。將它們用于需要在特定上下文中采用不同樣式的獨(dú)特元素。
3. 類選擇器（特異性：0 | 0 | 1 | 0）：還建議使用類選擇器來覆蓋現(xiàn)有的風(fēng)格。通過將特定類分配給元素并在新 CSS 文件中使用類選擇器，您可以覆蓋現(xiàn)有 CSS 文件應(yīng)用的樣式。
4. 元素選擇器（規(guī)范： 0 | 0 | 0 | 1)：元素選擇器具有最低的特異性。應(yīng)謹(jǐn)慎使用它們來覆蓋現(xiàn)有樣式，并且僅在無法應(yīng)用更具體的選擇器時(shí)使用。
5. !important 聲明：使用 !important 聲明會(huì)強(qiáng)制瀏覽器應(yīng)用指定的樣式，無論其特殊性。但是，應(yīng)謹(jǐn)慎使用它，因?yàn)樗赡軙?huì)導(dǎo)致意想不到的后果，并使保持不同樣式的一致性變得困難。

示例

考慮以下 HTML和CSS：

<code class="html"><article>
  <div id="id">
    <div class="class">
      <section>
        <div class="inline" style="background-color:red">
        </div>
      </section>
    </div>
  </div>
</article></code>

<code class="css">body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

#id {
  background-color: green
}

.class {
  background-color: yellow 
}

section {
  background-color: blue 
}

.inline {
  background-color: purple !IMPORTANT /*going to be purple - final result */ 
}</code>

通過使用類選擇器并利用特異性的概念，我們可以有效地覆蓋現(xiàn)有的CSS樣式并根據(jù)新CSS中定義的樣式自定義網(wǎng)頁的外觀文件。

以上是如何在不訪問源代碼的情況下使用新文件覆蓋現(xiàn)有網(wǎng)站 CSS？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！