CSS3の新しいセレクタの例

構造（位置）擬似クラスセレクタ（CSS3）

• :first-child : 指定されたセレクタは、親要素の最初の子要素を選択します。
• :last-child : 指定されたセレクタは、親要素の最後の子要素を選択します。
• :nth-child(n) : 要素の型に関係なく、親のN番目の子要素に一致します。
• :nth-last-child(n) : セレクターは、要素の種類に関係なく、最後の子から数えて、その要素の N 番目の子であるすべての要素に一致します。 nは数値、キーワード、または数式です

li:first-child { /* 最初の子を選択 */
                色: ピンク; 
            }
li:last-child { /* 最後の子 */
                色: 紫;
            }
li:nth-child(4) { /* 4番目の子を選択します。nは番号を表します */ 
                色: スカイブルー;
            }

属性セレクタ

特定の特殊な属性を持つタグを選択するセレクターは、属性セレクターと呼ばれます。

/* この属性を持つ要素を取得します */
div[class^=font] { /* class^=font はフォントの開始位置を意味します*/
            色: ピンク;
        }
div[class$=footer] { /* class$=footerはフッターの終了位置を示します*/
            色: スカイブルー;
        }
div[class*=tao] { /* class*=tao *= は tao が任意の位置に存在できることを意味します */
            色: 緑;
        }
<div class="font12">属性セレクター</div>
    <div class="font12">属性セレクター</div>
    <div class="font24">属性セレクター</div>
    <div class="font24">属性セレクター</div>
    <div class="font24">属性セレクター</div>
    <div class="24font">属性セレクター 123</div>
    <div class="sub-footer">属性セレクターフッター</div>
    <div class="jd-footer">属性セレクターフッター</div>
    <div class="news-tao-nav">属性セレクター</div>
    <div class="news-tao-header">属性セレクター</div>
    <div class="tao-header">属性セレクター</div>
入力[タイプ=テキスト]
div[クラス*=tao]

疑似要素セレクター (CSS3)

• E::first-letter テキストの最初の単語または文字 (中国語、日本語、韓国語など)
• E::first-line テキストの最初の行;
• E::selection は選択したテキストのスタイルを変更できます。

p::最初の文字 {
  フォントサイズ: 20px;
  色: ホットピンク;
}
/*最初の行の特別なスタイル*/
p::最初の行 {
  色: スカイブルー;
}
p::選択{
  /* フォントサイズ: 50px; */
  色: オレンジ;
}

4. E::before と E::after

E 要素内の開始位置と終了位置に要素を作成します。この要素はインライン要素であり、コンテンツ属性と組み合わせて使用​​する必要があります。

div::befor{
  コンテンツ:"開始";
}
div::after {
  コンテンツ:"終了";
}

E:after と E:before は、古いバージョンでは疑似要素です。CSS3 仕様では、「:」は疑似クラスを表し、「::」は疑似要素を表します。ただし、上位バージョンのブラウザでは、E:after と E:before は自動的に E::after と E::before として認識されます。これは互換性のためです。

「:」と「::」の違いは、擬似クラスと擬似要素を区別することです。

これらは実際のページ要素ではないため、疑似要素と呼ばれます。HTML には対応する要素はありませんが、使用方法やパフォーマンスの動作はすべて実際のページ要素と同じです。ページ要素と同じ CSS スタイルを使用できます。表面的にはページの特定の要素のように見えますが、実際には CSS スタイルによって表示される動作です。そのため、疑似要素と呼ばれます。 HTMLコード構造における疑似要素の表示です。疑似要素の構造は確認できないことがわかります。

知らせ

擬似要素 :before と :after によって追加されたコンテンツは、デフォルトではインライン要素です**。これらの 2 つの擬似要素のコンテンツ属性は、擬似要素のコンテンツを表します。:before と :after を設定する場合は、それらのコンテンツ属性も設定する必要があります。そうしないと、擬似要素は機能しません。

要約する

上記は、私が紹介した CSS3 の新しいセレクターの例です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!