html教學

CSS中!important的作用

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 05, 2016 pm 01:26 PM

提升指定樣式規則的應用優先權。

IE6及以下瀏覽器有個比較明確的支援問題存在，!important在同一條規則集裡不生效。請看下述程式碼：

範例程式碼：

div { color: #f00 !important; color: #000; }

在上述程式碼中，IE6及以下瀏覽器div的文字顏色為#000，!important並沒有覆蓋後面的規則；其它瀏覽器下div的文字顏色為#f00
IE6以下瀏覽器要使!important生效，可用以下程式碼：

範例程式碼：

div { color: #f00 !important; } div { color: #000; }

在上述程式碼中，IE6及以下瀏覽器中div的文字顏色表現與其它瀏覽器一致，都為#f00

　　IE6及更早瀏覽器下，!important在同一規則集內不生效。

範例：

<span style="color: #008080"> 1</span> <span style="color: #0000ff"><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 2</span> <span style="color: #0000ff"><span style="color: #800000">html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 3</span>   <span style="color: #0000ff"><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 4</span>     <span style="color: #0000ff"><span style="color: #800000">title</span><span style="color: #0000ff">></span>important的使用<span style="color: #0000ff"></span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 5</span>     <span style="color: #0000ff"><span style="color: #800000">meta </span><span style="color: #ff0000">name</span><span style="color: #0000ff">="content-type"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="text/html; charset=UTF-8"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 6</span> <span style="color: #0000ff"><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 7</span> <span style="background-color: #f5f5f5; color: #800000">.button </span><span style="background-color: #f5f5f5; color: #000000">{</span>
<span style="color: #008080"> 8</span> <span style="background-color: #f5f5f5; color: #ff0000">    position</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> relative</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080"> 9</span> <span style="background-color: #f5f5f5; color: #ff0000">    background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> #4CAF50</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">10</span> <span style="background-color: #f5f5f5; color: #ff0000">    border-radius</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">8px</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">11</span> <span style="background-color: #f5f5f5; color: #ff0000">    font-size</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 28px</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">12</span> <span style="background-color: #f5f5f5; color: #ff0000">    color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> #FFFFFF</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">13</span> <span style="background-color: #f5f5f5; color: #ff0000">    padding</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 20px</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">14</span> <span style="background-color: #f5f5f5; color: #ff0000">    width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">15</span> <span style="background-color: #f5f5f5; color: #ff0000">    text-align</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> center</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">16</span> <span style="background-color: #f5f5f5; color: #ff0000">    transition-duration</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 1.5s</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">17</span> <span style="background-color: #f5f5f5; color: #ff0000">    overflow</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> hidden</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">18</span> <span style="background-color: #f5f5f5; color: #ff0000">    cursor</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> pointer</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">19</span>   <span style="background-color: #f5f5f5; color: #000000">}</span>
<span style="color: #008080">20</span> <span style="background-color: #f5f5f5; color: #800000">  .button:hover</span><span style="background-color: #f5f5f5; color: #000000">{</span>
<span style="color: #008080">21</span> <span style="background-color: #f5f5f5; color: #ff0000">    box-shadow</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">0 4px 8px 0 rgba(0,0,0,0.1),0 6px 20px 0 rgba(0,0,0,0.299)</span><span style="background-color: #f5f5f5; color: #000000">;</span>  
<span style="color: #008080">22</span>   <span style="background-color: #f5f5f5; color: #000000">}</span>
<span style="color: #008080">23</span> 
<span style="color: #008080">24</span> <span style="background-color: #f5f5f5; color: #800000">  .button:after </span><span style="background-color: #f5f5f5; color: #000000">{</span>
<span style="color: #008080">25</span> <span style="background-color: #f5f5f5; color: #ff0000">    content</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> ""</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">26</span> <span style="background-color: #f5f5f5; color: #ff0000">    background</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> #90EE90</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">27</span> <span style="background-color: #f5f5f5; color: #ff0000">    display</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> block</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">28</span> <span style="background-color: #f5f5f5; color: #ff0000">    position</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> absolute</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">29</span> <span style="background-color: #f5f5f5; color: #ff0000">    padding-top</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 300%</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">30</span> <span style="background-color: #f5f5f5; color: #ff0000">    padding-left</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 350%</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">31</span> <span style="background-color: #f5f5f5; color: #ff0000">    margin-left</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> -20px!important</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">32</span> <span style="background-color: #f5f5f5; color: #ff0000">    margin-top</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> -120%</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">33</span> <span style="background-color: #f5f5f5; color: #ff0000">    opacity</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 0</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">34</span> <span style="background-color: #f5f5f5; color: #ff0000">    transition</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">1s</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">35</span> <span style="background-color: #f5f5f5; color: #000000">}</span>
<span style="color: #008080">36</span> 
<span style="color: #008080">37</span> <span style="background-color: #f5f5f5; color: #800000">.button:active:after </span><span style="background-color: #f5f5f5; color: #000000">{</span>
<span style="color: #008080">38</span> <span style="background-color: #f5f5f5; color: #ff0000">    padding</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 0</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">39</span> <span style="background-color: #f5f5f5; color: #ff0000">    margin</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 0</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">40</span> <span style="background-color: #f5f5f5; color: #ff0000">    opacity</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 1</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">41</span> <span style="background-color: #f5f5f5; color: #ff0000">    transition</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">0s</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="color: #008080">42</span> <span style="background-color: #f5f5f5; color: #000000">}</span>
<span style="color: #008080">43</span> <span style="color: #0000ff"></span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #008080">44</span> <span style="color: #0000ff"></span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080">45</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">46</span> 
<span style="color: #008080">47</span> <span style="color: #0000ff"><span style="color: #800000">button </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="button"</span><span style="color: #0000ff">></span>Click Me<span style="color: #0000ff"></span><span style="color: #800000">button</span><span style="color: #0000ff">></span>
<span style="color: #008080">48</span> <p>第31行的margin-left设置了!important，因此后面的第39行是不能更改margin-left的值。
<span style="color: #008080">50</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">51</span> <span style="color: #0000ff"></span><span style="color: #800000">html</span><span style="color: #0000ff">></span></p></span></span></span></span></span></span></span></span>

參考文章：

http://www.runoob.com/css3/css3-buttons.html

http://www.css88.com/book/css/rules/!important.htm

本文為部落客原創文章，若需轉載請註明出處。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

＆gt; gt;的目的是什麼元素？Mar 21, 2025 pm 12:34 PM

本文討論了HTML＆lt; Progress＆gt;元素，其目的，樣式和與＆lt; meter＆gt;元素。主要重點是使用＆lt; progress＆gt;為了完成任務和LT;儀表＆gt;對於stati

＆lt; datalist＆gt;的目的是什麼。元素？Mar 21, 2025 pm 12:33 PM

本文討論了html＆lt; datalist＆gt;元素，通過提供自動完整建議，改善用戶體驗並減少錯誤來增強表格。Character計數：159

＆lt; meter＆gt;的目的是什麼。元素？Mar 21, 2025 pm 12:35 PM

本文討論了HTML＆lt; meter＆gt;元素，用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了＆lt; meter＆gt;從＆lt; progress＆gt;和前

視口元標籤是什麼？為什麼對響應式設計很重要？Mar 20, 2025 pm 05:56 PM

本文討論了視口元標籤，這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互，而濫用可能會導致設計和可訪問性問題。

我如何使用html5＆lt; time＆gt; 元素以語義表示日期和時間？Mar 12, 2025 pm 04:05 PM

本文解釋了HTML5＆lt; time＆gt;語義日期/時間表示的元素。它強調了DateTime屬性對機器可讀性（ISO 8601格式）的重要性，並在人類可讀文本旁邊，增強Accessibilit

HTML5中跨瀏覽器兼容性的最佳實踐是什麼？Mar 17, 2025 pm 12:20 PM

文章討論了確保HTML5跨瀏覽器兼容性的最佳實踐，重點是特徵檢測，進行性增強和測試方法。

如何使用HTML5表單驗證屬性來驗證用戶輸入？Mar 17, 2025 pm 12:27 PM

本文討論了使用HTML5表單驗證屬性，例如必需的，圖案，最小，最大和長度限制，以直接在瀏覽器中驗證用戶輸入。

＆lt; iframe＆gt;的目的是什麼。標籤？使用時的安全考慮是什麼？Mar 20, 2025 pm 06:05 PM

本文討論了＆lt; iframe＆gt;將外部內容嵌入網頁，其常見用途，安全風險以及諸如對象標籤和API等替代方案的目的。

See all articles

熱AI工具

熱工具

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中

提升指定樣式規則的應用優先權。

範例：

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

Dreamweaver CS6

MantisBT

ZendStudio 13.5.1 Mac

記事本++7.3.1

DVWA

熱門話題