CSS3セレクターの新機能の実装

*{
                マージン: 0;
                パディング: 0;
            }
            div{
                幅: 300ピクセル;
                高さ: 200px;
                行の高さ: 200px;
                背景：淡い緑;
                色: ホットピンク;
                テキスト配置: 中央;
                表示: なし;
            }
            a:訪問{
                色：オレンジ;
            }
            ：ターゲット{
                表示: ブロック;
            }

<スタイル タイプ="text/css">
            *{
                マージン: 0;
                パディング: 0;
            }
            {
                テキスト装飾: なし;
                色: 黒;
                表示: ブロック;
            }
            ホバー{
                フォントサイズ:24px;
                /*色: 赤;*/
            }
            
            リンク
                フォントサイズ:48px;
                /*色: ピンク;*/
            }
            a:訪問{
                /*フォントサイズ:96px;*/
                /*色: ディープピンク;*/    
            }
        </スタイル>

<ヘッド>
    <メタ文字セット="UTF-8">
    <タイトル></タイトル>
    <スタイル タイプ="text/css">
        入力:有効{
            背景: スカイブルー;
        }
        入力:無効{
            背景: 濃いピンク;
        }
        入力:チェック済み{
            幅: 200ピクセル;
            高さ: 200px;
        }
        入力:フォーカス{
            背景: ピンク;
        }
    </スタイル>
</head>
<本文>
    <入力タイプ="テキスト" />
    <input type="text" disabled="無効" />
    <入力タイプ="チェックボックス" />
    <入力タイプ="テキスト" />
</本文>

<ヘッド>
    <メタ文字セット="UTF-8">
    <タイトル></タイトル>
    <スタイル タイプ="text/css">
        *{
            マージン: 0;
            パディング:0;
        }
        ラベル{
            位置: 相対的;
            float:left; /*ブロックレベル要素の拡張サイズに変換*/
            幅:100ピクセル;
            高さ:100px;
            境界線:2px実線;
            境界線の半径: 50%;
            オーバーフロー:非表示;
        }
        ラベル > 範囲{
            位置: 絶対;
            左:0;
            トップ:0;
            下:0;
            右:0;
        }
        入力{
            位置: 絶対;
            左:-50px;
            上:-50px;
        }
        入力:チェック済み + span{
            背景:ピンク;
        }
    </スタイル>
</head>
<本文>
    <ラベル>
        <input type="radio" name="rongtuowulian" />
        <span></span>
    </ラベル>
    <ラベル>
        <input type="radio" name="rongtuowulian" />
        <span></span>
    </ラベル>
    <ラベル>
        <input type="radio" name="rongtuowulian" />
        <span></span>
    </ラベル>
</本文>

<ヘッド>
    <メタ文字セット="utf-8">
    <meta name="viewport" content="width=デバイス幅,初期スケール=1.0" />
    <meta http-equiv="X-UA-compatible" content="ie=edge" />
    <タイトル></タイトル>
    <スタイル タイプ="text/css">
    p:最初の文字{
        色: #008000;
        フォントサイズ: 2.5rem;
    }
    p:最初の行{
        色: アクア;
    }
    p::選択{
        色：赤;
    }
    p:前{
        内容: 「私はあなたを永遠に愛します」
        色:青;
    }
    p:後{
        内容: '確かにそうです';
        色：緑;
    }
    </スタイル>
</head>
<本文>
    <div>こんにちは、大丈夫ですか?</div>
    <p> 私はまだ段落です。私はたくさん、たくさんです。解放碑は悪くないです。経済刺激策を維持してくださいハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハ</p>
</本文>

:最初のタイプ
:最後のタイプ
:n番目最後のタイプ(インデックス)
:only-of-type （:first-of-type:last-of-type とは対照的）
 または:n番目の型(1):n番目の最後の型(1))    
：ない        
:empty (コンテンツは空でなければならず、スペースは許可されず、属性は OK です)

*{
            マージン: 0;
            パディング: 0;
        }
        #wrap li:nth-of-type(1){
            色: ピンク;
        }
        p:only-of-type{
            境界線: 1px 実線;
        }

#ラップ::前{
        コンテンツ："";
        表示:ブロック;
        幅:200px;
        高さ:200px;
        背景: #00FFFF;
    }
    #ラップ::後{
        コンテンツ："";
        表示:ブロック;
        幅:200px;
        高さ:200px;
        背景: #0000FF;
    }