これまでに CSS の基本的なセレクターをいくつか学習しましたが、今日は CSS の複雑なセレクターを紹介します。複雑なセレクターには次の 3 つの種類があります。 1. 親子(派生)セレクタ <div class="wrapper"> <strong class="box"> 234 </strong> </div> 123 このとき、234に色をつけるには、親子セレクタを使う必要があります。先ほどのタグセレクタでも色をつけることはできますが、123にも色がついてしまうので、親子関係の親子セレクタを使うことで、123を変えずに234の色を正確に変えることができます。使う方法は、親タグ+スペース+子タグです。例えば div 強い em{ 背景色:赤; } このように、234の位置の背景色は赤ですが、123の位置は親子関係を満たしていないため、123の背景は赤くなりません。(もちろん、接続にタグセレクターのみを使用する必要はなく、クラスセレクターも使用できます。これは、親子関係が満たされているかどうかのみに依存し、接続セレクターとは関係ありません) 2. 子要素を直接選択する <div> 123 <strong> 456 </strong> </div> 直接の第1レベルの関係の子要素を示します。たとえば、ここでは123はdivの直下のemにあるため、このemはdivの直接の子要素と呼ばれます。このように変更すると、123のみが色を変更し、456は色を変更しません。使用される方法は div > em { 背景色:赤; } 「>」で接続されているため、div の直接の子要素である em 要素内のコンテンツを変更することを意味します。 3. パラレルセレクター <div>1</div> <div class="demo"> 2 </div> <p class="demo"> 3 </p> このとき、他の要素はそのままにして、2 の色だけを変更したい場合、タグセレクターや属性セレクターでは不可能です (もちろん、ID セレクターは使用できます)。そのため、2 つの並列要素を通じて変更対象を見つけて変更する並列セレクターが必要になります。使い方は次のとおりです: div.demo{ 背景色:赤; } 並列セレクター (1 つのオブジェクトを選択するための複数の選択条件) は、2 つ以上の選択方法がスペースなしで接続されているという点で、他の要素とは異なり、独自の特徴を持っています。 ] 複雑なセレクタを使用する場合は、ウェイトの問題を考慮する必要があります。同じ行のタグのウェイト値を直接追加できます。次に、CSS フォント スタイルと色のいくつかの簡単なプロパティを示します。 div{ font-size:30px; <!--フォントサイズ(高さが変更されます)--> font-weight:bold; <!-- フォントの太さ (strong タグには font-weight 属性が付属します) --> font-style:italic; <!--em タグ css スタイル--> font-family:arial; <!--フォントスタイル--> color:green; <!--純粋な英語の単語スタイル--> color:ff00ff; <!--カラーコード--> color:rgb(25,25,25); <!--カラー関数--> } フォント属性値は、辞書 www.css88.com で見つけることができます。色属性は、制限があるため、通常、純粋な英語の単語では記述されません (色は単語のとおりで、乳白色、象牙色などはなく、白のみです)。カラーコードと色関数は比較的柔軟で、変更の範囲が広いです。アーティストはカラー関数の背後にある値を当社のフロントエンドに提供し、RGB カラー テーブルをオンラインで検索できます。 今日はこの 2 種類の CSS コードを紹介します。先ほど提供した Web サイトは、フロントエンドを学習している私たちにとって非常に役立ちます。クリックして直接入力できます。他のコードについては後で書きます。書き方が下手な場合はご容赦ください。 要約する 上記はエディターが紹介したCSS複合セレクターとCSSフォントスタイルおよびカラー属性です。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
>>: Synology NAS は Docker コンテナを使用して KMS アクティベーション サーバーを構築し、Windows システムとオフィスをアクティベートします (操作手順)
以下に示すプラス記号の効果を実現するには: この効果を実現するには、div 要素だけが必要です。 b...
目次1. グローバルガード1. グローバル前線警備2. グローバル解像度ガード3. グローバルポスト...
目次1. オプションとは何ですか? 2. 含まれる属性3. エントリー属性エルデータ方法コンポーネン...
この記事の主な内容は次のとおりです。 1. 閉じるボタン2.キャレット3. フローティングを素早く設...
1. まず、サーバーの mysql にアクセスして権限を変更します。 GRANT オプション付きで、...
コードをコピーコードは次のとおりです。 <本文<フォームアクション="&quo...
この問題に関して、オンライン リソースをたくさん見つけました。ここにいくつかの方法を示します。コード...
目次server1にnginxをデプロイするサーバーにlnmpを展開するノード3にhttpdをデプロ...
この記事の例では、参考のためにjsキャンバスランダムパーティクルエフェクトの具体的なコードを共有して...
データベースへの接続などの基本的な操作はご自身で行ってください。この記事ではパスワードの変更方法を中...
ドロップダウン メニューやスライド メニューを使用している Web サイトをたくさん見つけたので、私...
サーバーサイドレンダリング (SSR) を使用する理由検索エンジンのクローラーが完全にレンダリングさ...
問題が発生しました。情報の編集をテストする際、編集した内容に一重引用符 (') が含まれてい...
最も人気のあるフロントエンド フレームワークの 1 つとして、Vue は多くのフロントエンド開発エン...
Jmeter がネイティブの結果表示機能を提供していることは誰もが知っています。ネイティブの結果表示...