CSS 基本チュートリアルの疑似クラスセレクター

CSS 疑似クラスセレクター: ハイパーリンクにスタイルを追加します (リンクのさまざまな状態にスタイルを追加します)

ハイパーリンクには 4 つの状態があります:

通常の状態 (:link): マウスはアクティブではありません前にリンクしたスタイルを置きます。

ホバー状態 (:hover): リンク上にマウスを置いたときのスタイル。

アクティブ状態 (:active): マウスの左ボタンを放さずに押し続けます。この状態は特に短時間です。

訪問ステータス (:visited): マウスの左ボタンを押してポップアップすると、スタイル効果が表示されます。

日常の作業では、次の記述方法を使用してリンクにさまざまなスタイルを追加します。

a:link, a:visited{ color:#444; } //「通常の状態」を変更します。「訪問ステータス」を 1 つにまとめます。

a:hover{ color:#990000; text-decoration:underline; } //「マウスオーバー」で 1 つの効果を作成します

次のセクション

新しいファイル

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>php.cn</title>
 </head>
 <style type="text/css">
 .box {
 
 height:30px;
 border:1px solid red;
 padding:10px;
 }
 .box a:link,.box a:visited{color:#66ff88;text-decoration:none; }/*将“正常状态”和“访问过的状态”合二为一。*/
 .box a:hover{color:#ff0000;text-decoration:underline;}/*“鼠标放上”单做一种效果*/
 
 </style>
 <body>
 <div class="box">
 <a href="#">欢迎来到php.cn</a>|
 <a href="#">首页</a>|
 <a href="#">课程</a>|
 <a href="#">问答</a>|
 <a href="#">手记</a>
 </div>
 </body>
</html>

提出するリセットコード

自動運転

全画面表示

CSS 基本チュートリアルの疑似クラス セレクター

CSS 基本チュートリアルの疑似クラスセレクター