css 子要素は親要素の実装を選択します

2023-08-01 18:33:16

QUICとは何ですか？ CSSセレクター

目次

  1. DOM と水平線の位置を変更して表示効果を変更します
    1. flex レイアウト
    2. float フロート
    3. absolute 属性
    4. direction 属性
  2. :focus-within
  3. :has()

ではcss、要素を前方に選択することはできません。つまり、親要素や以前の兄弟要素を選択することはできません。これはDOM レンダリング ルールの対象です。これは実際に理解するのが簡単です。html は外側の層から内側の層へのレンダリング メカニズムです。レイヤー; できる場合はレンダリングすると、レンダリングの乱れやパフォーマンスなどの問題が発生します。

DOM と水平線の位置を変更して表示効果を変更します

兄弟セレクターは後ろの要素しか選択できませんが、表現される「後ろ」はコード レベルの後ろを指し、水平線の効果を変更することで「以前の兄弟セレクター」の効果を実現できます。の後ろの要素、スルー スタイルまたはドキュメント フローを変更して地平線を前面に表示します。

(1) flex レイアウト

flexlayout には、要素の水平または垂直メソッドのレンダリング順序を制御できるflex-direction属性があります。
実装されたコードは次のとおりです。

<style>
    .cs__flex {
        display: inline-flex;
        flex-direction: row-reverse;
    }
    .form__input:focus ~ .form__input-lab {
        color: darkcyan;
        text-shadow: 0 0 1px;
    }
</style>
<div class="cs__flex">
	<input type="text" class="form__input" placeholder="ユーザー名を入力してください"><label class="form__input-lab">ユーザー名:</label>
</div>

(2)float フロート

このメソッドは互換性に優れていますが、コンテナの幅は子要素の幅に応じて計算する必要があります。

<style>
    .cs__float {
        width: 275px;
    }
    .form__input {
        width: 200px;
        float: right;
    }
    .form__input:focus ~ .form__input-lab {
        color: darkcyan;
        text-shadow: 0 0 1px;
    }
</style>
<div class="cs__float">
    <input type="text" class="form__input" placeholder="ユーザー名を入力してください"><label class="form__input-lab">ユーザー名：</label>
</div>

(3) absolute 属性

marginを使用して予約し、前面に配置して表示します

<style>
    .cs__absolute {
        position: relative;
    }
    .form__input {
        margin-left: 64px;
    }
    .form__input-lab {
        position: absolute;
        left: 0;
    }
    .form__input:focus ~ .form__input-lab {
        color: darkcyan;
        text-shadow: 0 0 1px;
    }
</style>
<div class="cs__absolute">
    <input type="text" class="form__input" placeholder="ユーザー名を入力してください"><label class="form__input-lab">ユーザー名：</label>
</div>

(4) direction 属性

文書フローの順序を変更し、DOM位置と の交換を実現します视界位置。互換性は高く、理解しやすいですが、唯一の欠点はインライン要素を対象にしなければならないことです。

<style>
    .cs__direction {
        direction: rtl;
    }
    .form__input,
    .form__input-lab {
        direction: ltr;
    }
    .form__input-lab { //インライン要素の場合
        display: inline-block;
    }
    .form__input:focus~.form__input-lab {
        color: darkcyan;
        text-shadow: 0 0 1px;
    }
</style>
<div class="cs__direction">
    <input type="text" class="form__input" placeholder="ユーザー名を入力してください"><label class="form__input-lab">ユーザー名：</label>
</div>

:focus-within父选择器「 」に似た疑似クラス セレクター

:focus-within現在の要素と一致するもの、または現在の子要素がフォーカスされた状態にあるもの、現在の要素と一致する:focusもの、
このプロパティは非常に実用的であり、本質的には「親セレクター」の動作であり、子要素の状態は親のスタイルに影響します。これは、css要素を選択して戻すことができない状況と比較でき、通常のDOMシーケンスがバリアフリー アクセスのスタイル例を実現します。
コード例は次のとおりです。

<style>
    .cs-normal:focus-within .cs-label {
        color: darkcyan;
        text-shadow: 0 0 1px;
    }
</style>
<div class="cs-normal">
    <label class="cs-label">用户名：</label><input type="text" class="">
</div>

を使用します:has()。 注: まだサポートされていません

<style>
li:has(> a.active){
    color:red;
}
</style>
<ul>
    <li>
        <a href="#" class="active">1</a>
    </li>
    <li>
        <a href="#">2</a>
    </li>
</ul>

has() 疑似クラスの使用についてはインターネットでも言及されていますが、現在この属性をサポートしているブラウザはないため、事前の理解のためにここでは詳しく説明しません。

QUICとは何ですか？ CSSセレクター