CSS3の新しいセレクタの例

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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  MySQLデータベースを使い始めるための最初のステップはテーブルを作成することです

>>:  CentOS 7 での Docker プロキシの設定 (Linux での Systemd サービスの環境変数設定)

推薦する

HTML+CSS+JS でキャンバスがマウスの小さな円に追従する特殊効果のソースコードを実現

効果(ソースコードは最後にあります): 成し遂げる: 1. タグを定義します。 <h1>...

Webpack パッケージング CSS 背景画像パスの問題に対する完璧なソリューション

vue コンポーネントのスタイル タグ内には、背景画像を使用する次の CSS コードがあります。 背...

mysqldump を使用した MySql のインポートおよびエクスポート方法の概要

データベースデータをエクスポートします:まずcmdを開いてMySQLのbinフォルダに入ります1. ...

MySQL の一般的な日付比較および計算関数

MySql での時間比較の実装unix_timestamp() unix_timestamp 関数は...

非常に詳細な MySQL8.0.22 のインストールと設定のチュートリアル

みなさんこんにちは。今日は、MySQL 8.0.22 のインストールと構成について学習します。注意深...

おすすめの無料英語手書きフォント20選

Jellyka Beesアンティーク手書き [ank]* ジェリーカ・カティカップケーキ LHF ジ...

WHMCS V7.4.2 グラフィカル インストール チュートリアル

1. はじめにWHMCS は、ユーザー管理、請求書の支払い、ヘルプ サービスなど、オンライン ビジネ...

JavaScript コンストラクタとプロトタイプの関係

目次1. コンストラクタとプロトタイプ1. コンストラクター2. コンストラクタ問題3. コンストラ...

React setStateデータ更新メカニズムの詳細な説明

目次setStateを使用する理由setStateの使用法非同期または同期更新要約するsetStat...

Linuxの一般的なコマンドでLinuxのmoreコマンドを使用する方法

more は、最もよく使用されるツールの 1 つです。最も一般的な使用方法は、出力コンテンツを表示し...

JavaScript PromiseとAsync/Awaitの詳細な説明

目次概要4つの例例1: 誕生日で説明する約束の基本例2: 数字当てゲーム例3: Web APIから国...

Linuxでポートが開いているかどうかを確認する方法のまとめ

方法1: lsofコマンドを使用するlsof コマンドを使用して、ポートが開いているかどうかを確認で...

Vue+Openlayer で select を使用して要素を選択する実装コード

効果画像: 実装コード: <テンプレート> <div id="map&q...

MySQL で行を列に変換したり、列を行に変換したりする詳細な例

mysql 行から列へ、列から行へ難しい文章ではないので、詳しく説明はしません。文章を読むときは、一...

MySQLでテーブル名を変更する方法と注意すべき点

目次1. テーブル名を変更する方法2. 注記要約: 1. テーブル名を変更する方法RENAME TA...