CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

：CSSのアクティブな疑似クラス

疑似クラス 要素またはcssセレクターのさまざまな状態を表示することです。アクティブな疑似クラスは、要素がアクティブな状態にあることを示すためのものです。

この疑似クラスは、主にリンクとボタン、またはアクティブにできるその他の要素に関連付けられています。

たとえば、リンクがアクティブであることがリンクに関連付けられている場合。

構文

a:active { color:green;}

：アクティブ疑似クラスの実際の使用法を確認しましょう 次のように、さまざまなシナリオで-

例

<html>
<head>
   <style>
      a:active { color:green;}
   </style>
</head>
<body>
   <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

説明

リンクを初めて表示すると、通常のリンクの色（青）で表示され、このリンクに1回アクセスすると、リンクは緑に変わります。

例

<html>
<head>
   <style>
      a:active {font-size:20px;}
   </style>
</head>
<body>
   <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

説明

これにより、リンクをクリックしている間、リンクのフォントサイズが20pxに変更されます。

例

<html>
<head>
   <style>
      body:active {
         background: seagreen;
      }
      </style>
</head>
<body>
<div>click anywhere in this window</div>
</body>
</html>

説明

画面の任意の場所をクリックすると、背景色がシーグリーンに変わります。

例

<html>
<head>
   <style>
      #thisButton:active { color: red}
   </style>
</head>
<body>
   <button id="thisButton">Click Me!!</button>
</body>
</html>

説明

ボタンをクリックすると、ボタンのテキストのフォントの色が赤に変わります。

ブラウザの互換性

Chrome Firefox エッジ IE サファリ Opera
1 1 はい 4 1 5

  1. CSSの標準リンクスタイル

    要件に応じてリンクのスタイルを設定できます。リンクには、通常のテキストと区別できるスタイルを設定することをお勧めします。さまざまなリンク状態のデフォルトのリンクスタイルは次のとおりです- リンク状態 色 アクティブ ＃EE0000 フォーカス ＃5E9ED6またはWindowsとMacの場合は、同様の青い輪郭の色合い、 ＃F07746 Linuxのアウトライン、テキストの色は同じまま ホバー ＃0000EE リンク ＃0000EE 訪問済み ＃551A8B 注 −上記の色は、新しいバージョンのブラウザで変更される場合があります。適切な機能のために、疑似セレク

  2. CSS：focus-疑似クラス内

    フォーカスされた要素の親のスタイルを設定する場合は、CSS：focus-withinpseudo-classを使用します。 次の例は、CSS：focus-withinpseudo-classを示しています。 例 <!DOCTYPE html> <html> <head> <style> form {    margin: 2%;    padding: 2%;    display: flex;    flex-direction: column;   &