ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS における a:active の役割とその使用方法の詳細な説明
CSS における a:active の役割とその使用方法の詳細な説明
- 黄舟オリジナル
- 2017-07-19 16:53:4816905ブラウズ
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 サイトの他の関連記事を参照してください。