CSS ですべての子要素を選択し、スタイルを追加する方法

CSS ですべての子要素を選択し、スタイルを追加する方法

方法:

実際のプロジェクトを例に挙げてみましょう。

.lk-ツールバー{
    .el-入力{
        幅: 169ピクセル;
        右マージン: 10px;
    }
    > * {
        下マージン: 20px;
    }
}

上記のコードは、.lk-toolbar以下のすべてのサブ要素のmargin-bottom: 20pxを正常に実装しています。

これにより、すべての可能なサブ要素タイプをリストするという愚かな作業を回避できます。

.lk-ツールバー{
    .el-入力{
        幅: 169ピクセル;
        右マージン: 10px;
        下マージン: 20px;
    }
    .el-button、.el-date-editor {
        下マージン: 20px;
    }
}

適用シナリオ(効果):

洞察(ナンセンス):

最初は、CSS にすべての子要素を選択するセレクターがあるのだろうかと思いました。後でドキュメントを確認したところ、そのようなセレクターはないものの、最も基本的な方法は説明されており、残りは自分の運次第 (柔軟に使用できるかどうかを確認してください!) であることがわかりました。

チュートリアル OS: 「メソッドはすべてここにあります。使用できるかどうかはあなた次第です。」

これで、すべての子要素を選択し、CSS でスタイルを追加する方法についての記事は終了です。CSS を使用して子要素にスタイルを追加する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Nginx ストリーム構成プロキシ (Nginx TCP/UDP ロード バランシング)

>>:  HTML(divレイヤー)を介してFLASHにリンクを追加するための実装コード

推薦する

MySQL シリーズ 10 同時実行制御を実装するための MySQL トランザクション分離

目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...

レンダリング関数と JSX の詳細

目次1. 基本2. ノード、ツリー、仮想DOM 1. 仮想DOM 3. createElementパ...

sqlmap インジェクションの詳細なグラフィック説明

目次1. この Web サイトには SQL インジェクションの脆弱性がある可能性があることが判明しま...

jQueryはすべてのショッピングカート機能を実装します

目次1. すべて選択2. 商品の数量を増やすか減らす3. 商品の小計を変更する4. 合計と合計額を計...

MySQL クロステーブルクエリとクロステーブル更新

SQL の基礎知識がある友人は、「クロステーブル クエリ」について聞いたことがあるはずですが、クロス...

Win7 64 ビット版に MySQL 5.7 をダウンロードしてインストールする際によくある問題の概要

1. 公式ウェブサイトからMySQLをダウンロードします。 これが私たちが探しているものです、win...

JavaScript 文字列オブジェクトメソッド

目次文字列オブジェクトのメソッド方法 1: indexOf() (推奨)方法 2: search()...

Vueは新しいウィンドウを開き、パラメータ転送のグラフィック例を実装します。

私が実現したい機能は、新しいウィンドウを開いて新しいページを表示することですが、パラメータを渡す必要...

適応レイアウトの処理について(フロートとマージンネガティブマージンを使用)

適応型レイアウトは、実際のアプリケーションでますます一般的になっています。今日は、主にフローティング...

知っておくべき 25 の Vue のヒント

目次1. プロパティを型リストに制限する2. デフォルトのコンテンツと拡張ポイント3. ネストされた...

CSV、Excel、SQL ファイルを MySQL にインポートするためのヒント

1. csvファイルをインポートする次のコマンドを使用します。 1.mysql> infile...

MySQL 文字セットの文字化けとその解決方法

序文文字セットは、一連のシンボルとエンコード規則です。Oracle データベースでも MySQL デ...

Word のコンテンツを Web サイトのエディターに直接コピーすることはお勧めしません。

<br />質問: Word のコンテンツを Web サイトのエディターに直接コピーする...

Vueはシンプルなショッピングカートの例を実装します

この記事では、参考までに、Vue の具体的なコードを共有して、簡単なショッピングカートを実装します。...

ルート変更を監視するJavaScriptの詳細な説明

目次歴史pushState() メソッドpushState() の使用シナリオreplaceStat...