CSS --- 3擬似クラスと動的リンク擬似クラス

リンク擬似クラスはリンクされていますハイパーリンクとしてすべてのアンカーを表し、非アクセス可能なアドレスへのポイント

リンク擬似クラスは、DIVに追加することはできません

<！DOCTYPE HTML> 
<HTML> 
    <HEAD> 
        <METAのcharset = "UTF-8 " > 
        <タイトル> </ TITLE> 
        < - :!リンク：ハイパーリンクとして表示され、すべての未訪問のアンカーを指しているアドレス- > 
        <スタイルタイプ= " テキスト/ CSS " > 
            A { 
                テキスト - 装飾：なし; 
            } 
            A：{リンクの
                色：赤; 
            } 
            #test：リンク{ 
                背景：ピンク; 
            } </スタイル> 
    </ HEAD> 
    <ボディ> 
        <HREF = " ＃"
        私は私が注文した注文>ポイント私の</a>の
        <divの上記のid = " テスト" >私はdivの友人</ div> 
    </ BODY> 
</ HTML>

コードの表示

訪れたリンクの擬似クラス：ハイパーリンクとしてすべてのアンカーを表しており、訪れたアドレスへのポイント

<！DOCTYPE HTML> 
<HTML> 
    <HEAD> 
        <METAのcharset = " UTF-8 " > 
        <タイトル> </ TITLE> 
        < - :!訪問：ハイパーリンクとして表現され、すべての訪問アンカーのアドレスへのポイント- > 
        <スタイルタイプ= " テキスト/ CSS " > 
            A { 
                テキスト - 装飾：なし; 
            } 
            A：{リンクの
                色：ブルー; 
            } 
            Aは：訪問{ 
                色：赤を; 
            }
         </スタイル> 
    </ HEAD> 
    <BODY > 
        <HREF = " ＃"私は私が私の</a>に命じ命じ>ポイント
    </ BODY> 
</ HTML>

コードの表示

擬似クラスのリンク先：IDがエレメントフラグメント識別子URIであり、特定の要素を表します。

ターゲットのdivスイッチを書き込むために使用することができます

<！DOCTYPE HTML> 
<HTML> 
    <HEAD> 
        <METAのcharset = " UTF-8。" > 
        <タイトル> </ TITLE> 
        < -特定のターゲット要素の:!代表は、IDはURIのフラグメント識別子の要素であります。- > 
        <スタイルタイプ= " テキスト/ CSS " > 
            * { 
                マージン：0 ; 
                パディング：0 ; 
            } 
            div要素{ 
                幅：300ピクセルによって; 
                高さ：200pxの、
                ライン - 高さ：200pxの; 
                背景：黒;
                テキスト整列：センター; 
                表示：なし; 
            } 
            ：ターゲット{ 
                表示：ブロック; 
            }
         </スタイル> 
    </ HEAD> 
    <BODY> 
        の<a href= "#div1"> DIV1 </a>を
        <a href= "#div2"> DIV2 </a>を
        <a href= "#div3"> DIV3 </a>の
        <DIV ID = " DIV1 " > 
            DIV1 </ DIV> 
        <DIV ID = "
        
        </ DIV> 
        <DIV ID = " DIV3 " > 
            DIV3
         </ div> 
    </ body> 
</ HTML>

コードの表示

ダイナミック疑似クラス：へ：ホバー、削除：アクティブ

<！DOCTYPE HTML> 
<HTML> 
    <HEAD> 
        <メタ文字コード= " UTF-8 " > 
        <タイトル> </ TITLE> 
        <スタイルタイプ= " テキスト/ cssの" > 
            #test：ホバー{ 
                色：ピンク; 
            } 
            #test：アクティブ{ 
                色：赤。
            }
         </スタイル> 
    </ head> 
    <body> 
        <DIV ID = " テスト" > 
            我是試験
         </ div> 
    </ body> 
</ HTML>

コードの表示

<！DOCTYPE HTML> 
<HTML> 
    <HEAD> 
        <メタ文字コード= " UTF-8 " > 
        <タイトル> </ TITLE> 
        <スタイルタイプ= " テキスト/ cssの" > 
            * { 
                マージン：0 ; 
                パディング：0 ; 
            } 
            { 
                テキスト - 装飾：なし。
                色：ブラック。
                表示ブロック; 
            } 
            A：ホバー{ 
                フォント - サイズ：24ピクセル。
                / * 色：赤; * / 
            } 
            
            A：リンク{ 
                フォント - サイズ：48px;
                 / * カラー：;ピンク* / 
            } 
            A：{訪問
                / * ; 96PX：フォントサイズ* / 
                / * ; DeepPink：カラー* /     
            }
         </スタイル> 
    </ HEAD> 
    <BODY> 
        の<a href= "#1">私は最初のタブ</a>にある"#2"> 
        <a href= /私は<2番目のタブですA> 
        <a href=の"#3">私はタグ<第三ました/ A><a
        href= "#4">私は第四ラベル</a>の午前"#5"> 
        の<a href= 私は第五ラベル</a>の午前
        の<a href= "#6"> Iタグは第六</a>にある
    </ BODY> 
</ HTML>

実用化

CSS --- 3擬似クラスと動的リンク擬似クラス

おすすめ