The role of !important in CSS

Increase the application priority of specified style rules.

• There is a relatively explicit support problem in browsers IE6 and below. !important does not take effect in the same rule set. Please look at the following code:

  Sample code:

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

  In the above code, the text color of the div in IE6 and below browsers is #000, !important does not override the following rules; the text color of the div in other browsers is #f00

• To make !important take effect in IE6 and below browsers, you can use the following code:

  Sample code:

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

  In the above code, the text color of div in IE6 and below browsers is consistent with other browsers, both are #f00

　In IE6 and earlier browsers, !important does not take effect in the same rule set.

Example:

<span style="color: #008080"> 1</span> <span style="color: #0000ff">&lt;!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">&gt;</span>
<span style="color: #008080"> 2</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">html</span><span style="color: #0000ff">&gt;</span>
<span style="color: #008080"> 3</span>   <span style="color: #0000ff">&lt;</span><span style="color: #800000">head</span><span style="color: #0000ff">&gt;</span>
<span style="color: #008080"> 4</span>     <span style="color: #0000ff">&lt;</span><span style="color: #800000">title</span><span style="color: #0000ff">&gt;</span>important的使用<span style="color: #0000ff">&lt;/</span><span style="color: #800000">title</span><span style="color: #0000ff">&gt;</span>
<span style="color: #008080"> 5</span>     <span style="color: #0000ff">&lt;</span><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">&gt;</span>
<span style="color: #008080"> 6</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">style</span><span style="color: #0000ff">&gt;</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">&lt;/</span><span style="color: #800000">style</span><span style="color: #0000ff">&gt;</span>
<span style="color: #008080">44</span> <span style="color: #0000ff">&lt;/</span><span style="color: #800000">head</span><span style="color: #0000ff">&gt;</span>
<span style="color: #008080">45</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">body</span><span style="color: #0000ff">&gt;</span>
<span style="color: #008080">46</span> 
<span style="color: #008080">47</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">button </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="button"</span><span style="color: #0000ff">&gt;</span>Click Me<span style="color: #0000ff">&lt;/</span><span style="color: #800000">button</span><span style="color: #0000ff">&gt;</span>
<span style="color: #008080">48</span> &lt;p&gt;第31行的margin-left设置了!important，因此后面的第39行是不能更改margin-left的值。
<span style="color: #008080">50</span> <span style="color: #0000ff">&lt;/</span><span style="color: #800000">body</span><span style="color: #0000ff">&gt;</span>
<span style="color: #008080">51</span> <span style="color: #0000ff">&lt;/</span><span style="color: #800000">html</span><span style="color: #0000ff">&gt;</span>

Reference article:

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

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

This article is an original article by the blogger. If you need to reprint, please indicate the source.