Active

activeの一節は、英語では「active」、つまりマウスをクリックすることを意味すると解釈されます。アクティブセレクターの最も一般的な例はおそらくリンクに適用されますが、リンクを開くのは瞬間的なアクションであり、アクティブセレクターの特性を十分に反映していません。

アクティブの特徴

実際、アクティブでリンクを開くと、モジュールを解放するまでモジュールをクリックするという、アクティブをアクティブにするプロセスがあります。この処理にかかる時間を指定しない場合、デフォルトでは 10 分の数秒かかると思います。

<!DOCTYPE html><html>
  <head>
    <title>a</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
      <style>
      a{
        display:block;
        width:30px;
        margin:20px;
        border-radius:8px;
        padding:20px 50px;
        text-align:center;
        background:green;
      }
      a:active{
        background:indigo;
      }
    </style>
  </head>
  
  <body>
    <a href="paris.jpg">link</a>
  </body></html>

ログイン後にコピー

この時間は、transition 属性を通じて調整できます。

      a:active{
        background:indigo;
        transition:3s;
      }

ログイン後にコピー

読者は実験を行い、transition の値を変更してから、avtive セレクターによって費やされた時間をテストできます。

アクティブな例

<!DOCTYPE html><html>
  <head>
    <title>a</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
    <style> 
       p      {
        width:100px;
        height:100px;
        background:red;
        transition: 5s;
       }

        p:active       {
        width:300px;
        height:300px;
        transition:3s;
        }
      </style>
  </head>
  <body>
  <p></p>
  </body></html>

ログイン後にコピー

遷移が 2 つあるということは、遷移が 2 つあることを意味します。