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 システムとオフィスをアクティベートします (操作手順)

推薦する

CSS で「プラス記号」効果を実装するためのサンプルコード

以下に示すプラス記号の効果を実現するには: この効果を実現するには、div 要素だけが必要です。 b...

Vueルーティングナビゲーションガードの簡単な理解

目次1. グローバルガード1. グローバル前線警備2. グローバル解像度ガード3. グローバルポスト...

Vueオプションの詳細な説明

目次1. オプションとは何ですか? 2. 含まれる属性3. エントリー属性エルデータ方法コンポーネン...

Bootstrap 3.0 の特殊効果の学習ノート(表示と非表示、フローティングの除去、閉じるボタンなど)

この記事の主な内容は次のとおりです。 1. 閉じるボタン2.キャレット3. フローティングを素早く設...

Navicateを使用してAlibaba Cloud Server上のMySQLに接続する

1. まず、サーバーの mysql にアクセスして権限を変更します。 GRANT オプション付きで、...

HTML要素にフォーカスを設定する方法

コードをコピーコードは次のとおりです。 <本文<フォームアクション="&quo...

html の img src="" で js 関数または js 変数を呼び出して、画像パスを動的に指定します。

この問題に関して、オンライン リソースをたくさん見つけました。ここにいくつかの方法を示します。コード...

nginx が動的と静的の分離を実装する方法の例

目次server1にnginxをデプロイするサーバーにlnmpを展開するノード3にhttpdをデプロ...

js キャンバスはランダムなパーティクル効果を実現します

この記事の例では、参考のためにjsキャンバスランダムパーティクルエフェクトの具体的なコードを共有して...

mysql 8.0.16 winx64 および Linux でルート ユーザーのパスワードを変更する方法

データベースへの接続などの基本的な操作はご自身で行ってください。この記事ではパスワードの変更方法を中...

ドロップダウンメニューとスライドメニューのデザイン例

ドロップダウン メニューやスライド メニューを使用している Web サイトをたくさん見つけたので、私...

VueのSSRサーバーサイドレンダリング例の詳細な説明

サーバーサイドレンダリング (SSR) を使用する理由検索エンジンのクローラーが完全にレンダリングさ...

英語のシングルクォーテーション「''」を含むSQLの記述の失敗について徹底解説

問題が発生しました。情報の編集をテストする際、編集した内容に一重引用符 (') が含まれてい...

Vueを使い始める際に習得する必要がある知識について簡単に説明します

最も人気のあるフロントエンド フレームワークの 1 つとして、Vue は多くのフロントエンド開発エン...

Docker を使用した JMeter+Grafana+Influxdb 監視プラットフォームの構築に関する詳細なチュートリアル

Jmeter がネイティブの結果表示機能を提供していることは誰もが知っています。ネイティブの結果表示...