CSS之詳解:active選擇器

Active的一段話

 active的英文解釋為“正面的”，表現在滑鼠上就是點擊的意思。關於active選擇器最多的範例恐怕就是應用在連結上面的，然而打開連結是一個一瞬間的動作，這不能很好的體現active選擇器的特點。

 

Active的特點

其實我們打開一個有active鏈接，啟動acive是有一個過程的，就是點擊模組後直到鬆開模組。如果我們不指定這個過程所花費的時間，筆者認為其預設花費零點幾秒。

<span style="font-size: 14px"><span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>a<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</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">></span>
      <span style="color: #0000ff"><</span><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="color: #800000; background-color: #f5f5f5">
      a</span><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">
        display</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">block</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        width</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">30px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        margin</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">20px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        border-radius</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">8px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        padding</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">20px 50px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        text-align</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">center</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        background</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">green</span><span style="color: #000000; background-color: #f5f5f5">;</span>
      <span style="color: #000000; background-color: #f5f5f5">}</span><span style="color: #800000; background-color: #f5f5f5">
      a:active</span><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">
        background</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">indigo</span><span style="color: #000000; background-color: #f5f5f5">;</span>
      <span style="color: #000000; background-color: #f5f5f5">}</span>
    <span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
  
  <span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="paris.jpg"</span><span style="color: #0000ff">></span>link<span style="color: #0000ff"></</span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span></span>

 

我們可以透過過渡屬性（transition）來調整這個時間。

<span style="color: #000000; font-size: 14px">      a:active{
        background:indigo;
        transition:3s;
      }</span>

 

讀者可以做一個實驗，改變其中transition的值，然後測試:avtive選擇器所花費的時間。

 

ACTIVE範例

<span style="font-size: 14px"><span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>a<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</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">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="color: #800000; background-color: #f5f5f5"> 
       div
      </span><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">
        width</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">100px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        height</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">100px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        background</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">red</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        transition</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 5s</span><span style="color: #000000; background-color: #f5f5f5">;</span>
       <span style="color: #000000; background-color: #f5f5f5">}</span><span style="color: #800000; background-color: #f5f5f5">

        div:active
       </span><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">
        width</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">300px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        height</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">300px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        transition</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">3s</span><span style="color: #000000; background-color: #f5f5f5">;</span>
        <span style="color: #000000; background-color: #f5f5f5">}</span>
      <span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">div</span><span style="color: #0000ff">></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
             </span>

這裡面有兩個transition，也就是意味著有兩個過渡。

1. 1. 第一個過渡是啟動active選擇器，這時候 div:avtive 裡的 transition 。
   2. 第二個過渡是鬆開滑鼠，影像的尺寸恢復正常的過程，這時候 div 裡的 transition 起作用。

如果讀者只設定了在 div 裡面的 transition ，那麼選擇器的過渡時間也就預設為 div 裡的 transition 了。

 

如果讀者有興趣也可以試試transition和其他選擇器的組合。