構造(位置)擬似クラスセレクタ(CSS3)
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)
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 サービスの環境変数設定)
効果(ソースコードは最後にあります): 成し遂げる: 1. タグを定義します。 <h1>...
vue コンポーネントのスタイル タグ内には、背景画像を使用する次の CSS コードがあります。 背...
データベースデータをエクスポートします:まずcmdを開いてMySQLのbinフォルダに入ります1. ...
MySql での時間比較の実装unix_timestamp() unix_timestamp 関数は...
みなさんこんにちは。今日は、MySQL 8.0.22 のインストールと構成について学習します。注意深...
Jellyka Beesアンティーク手書き [ank]* ジェリーカ・カティカップケーキ LHF ジ...
1. はじめにWHMCS は、ユーザー管理、請求書の支払い、ヘルプ サービスなど、オンライン ビジネ...
目次1. コンストラクタとプロトタイプ1. コンストラクター2. コンストラクタ問題3. コンストラ...
目次setStateを使用する理由setStateの使用法非同期または同期更新要約するsetStat...
more は、最もよく使用されるツールの 1 つです。最も一般的な使用方法は、出力コンテンツを表示し...
目次概要4つの例例1: 誕生日で説明する約束の基本例2: 数字当てゲーム例3: Web APIから国...
方法1: lsofコマンドを使用するlsof コマンドを使用して、ポートが開いているかどうかを確認で...
効果画像: 実装コード: <テンプレート> <div id="map&q...
mysql 行から列へ、列から行へ難しい文章ではないので、詳しく説明はしません。文章を読むときは、一...
目次1. テーブル名を変更する方法2. 注記要約: 1. テーブル名を変更する方法RENAME TA...