CSS の複雑なセレクターと CSS のフォントスタイルと色属性の詳細な説明

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