CSS における a:active の役割とその使用方法の詳細な説明-CSSチュートリアル-php.cn

CSS における a:active の役割とその使用方法の詳細な説明

黄舟

リリース： 2017-07-19 16:53:48

オリジナル

16858 人が閲覧しました

CSS :active selector

定義と使用法

:active selectorはアクティブなリンクを選択するために使用されます。

リンクをクリックするとアクティブになります。

ヒント: 未訪問のページを指すリンクのスタイルを設定するには :link セレクターを使用し、訪問済みのページへのリンクのスタイルを設定するには :visited を、マウスポインターが上に浮かんだときのスタイルを設定するには :hover セレクターを使用してください。リンク。。

例 1 未訪問、訪問済み、フローティング、およびアクティブなリンクを選択し、そのスタイルを設定します:

a:link{color:blue;}
a:visited{color:blue;}
a:hover{color:red;}
a:active{color:yellow;}

ログイン後にコピー

例 2 リンクにさまざまなスタイルを設定します:

a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}

ログイン後にコピー

マウスがアクティブになった (クリックされた) ときのリンクのスタイルを定義します。 4 つのリンク疑似クラスがあります:
a:リンク通常のリンクスタイル a:訪問済みリンク訪問済みスタイル a:ホバーリンクハイライト (マウスオーバー) スタイル a:アクティブリンクアクティブスタイル

例:

<!DOCTYPE html>
<html>
<head>
<style>
a:active
{
background-color:yellow;
}
</style>
</head>
<body>

<a href="http://www.w3school.com.cn">W3Sschool</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a>

<p><b>注释：</b>:active 选择器为活动的链接设置样式。</p>

</body>
</html>

ログイン後にコピー

結果は次のようになります: W3Sschool Google Wikipedia
注: :active セレクターはアクティブなリンクをスタイルします。
マウスがアクティブになった（クリックされた）ときのリンクのスタイルを定義します。 4 つのリンク疑似クラスがあります:
a:リンク通常のリンクスタイル a:訪問済みリンク訪問済みスタイル a:ホバーリンクハイライト (マウスオーバー) スタイル a:アクティブリンクアクティブ化スタイル

以上がCSS における a:active の役割とその使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。