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

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

<<:  MySQLのバージョンアップ方法を超詳しく解説

>>:  Synology NAS は Docker コンテナを使用して KMS アクティベーション サーバーを構築し、Windows システムとオフィスをアクティベートします (操作手順)

推薦する

Nginxはhttpとhttpsの両方のアクセスをサポートするために同じドメイン名を設定します

Nginx は同じドメイン名で構成されており、http と https の両方でアクセスできます。証...

Alibaba Cloud サーバーの購入とインストール方法

1. サーバーを購入するこの例では、購入したサーバーはAlibaba Cloudです。大学生はAli...

Mysql が CPU を過剰に占有する場合の最適化方法 (必読)

Mysql が CPU を占有しすぎる場合、どこから最適化を開始すればよいでしょうか? CPU 使...

CSS3はグラフィックの落下アニメーション効果を実現します

まずは効果を確認実装コード <div class="box box1"&g...

Navicat の MySQL へのリモート接続の実装手順の分析

序文皆さんはリモート サーバーで開発を行っており、MySQL の使用率はかなり高いはずです。コマンド...

図を使ってWeb2.0とは何かを説明する

最近はWeb2.0という言葉をよく耳にしますが、Web2.0とは何でしょうか? Web 1.0 とど...

Vue で動的に読み込まれたローカル画像を処理する方法

問題を見つける今日は、vue ファイルにローカル画像を導入する際に問題が発生したので、この記事を書き...

JavaScript オブジェクト (詳細)

目次JavaScript オブジェクト1. 定義2. オブジェクトの分類3. オブジェクトを定義する...

CSSでnグリッドレイアウトを実装する方法

一般的なアプリケーションシナリオ現在のアプリのインターフェースは基本的に同じであり、グリッドレイアウ...

Tkinterはjsキャンバスを使用してグラデーションカラーを実現します

目次1. RGBを使用して色を表す2. Tkinter キャンバスコンポーネント3. グラデーション...

CentOSにPHP+Apache+MySQLのサーバー環境をインストールして構築する

Yum (フルネームは Yellow dog Updater, Modified) は、Fedora...

CSSカスタムプロパティの予備的な理解

現在、CSS プリプロセッサは Web 開発の標準となっています。 プリプロセッサの主な利点の 1 ...

Docker に ElasticSearch 6.x をインストールする詳細なチュートリアル

まず、イメージをプルします(またはコンテナを作成するだけで、自然にプルされます)。 docker p...

Nginx ログのカスタマイズとログ バッファの有効化の詳細な説明

序文ウェブサイトのアクセス元をカウントしたい場合は、PHP を使用して情報を取得してデータベースに記...

重複リクエストを削除するAxiosのソリューションについての簡単な説明

目次1. 重複したリクエストをキャンセルする2. すべてのリクエストをクリーンアップするこのソリュー...