2.CSSセレクタ-仮想クラスセレクタ(n回child,n回-of-type,not)

18025 ワード
テキストリンク
<仮想クラスセレクタ>
Pseudo-Class Selector
バーチャルクラスセレクタ
선택자:설명 { 스타일 속성 }
仮想クラスセレクタは、上記の方法の「説明」に対応するセレクタです.
選択者に細部を与える役割を果たす.
first-child
first-schildという名前の仮想クラスセレクタは、ラベルやクラスなどの最初のサブ要素を検索することでスタイルを適用します.たとえば、
li:first-child {}
前述したように、ドキュメント内のすべての
  • タグを検索し、->の親要素に移動します.
    親要素の最初の子を見つけてスタイルを適用します.
    詳細:
    <ul>
  <li>python</li>
  <li class="programming">java</li>
  <li class="programming">javascript</li>
  <li class="programming">c++</li>
    これらのhtmlでは
    .programming:first-child { color: red; }
    cssを適用するとjavaのフォントが赤くなる必要がある場合がありますが、実際にはそうではありません.
    first-childは「programmingというclassの中で最初のものを持つ」という意味ではないからです.
    first-schildを選ぶプログラムは子供たちの両親です
    最初のサブアイテムはpythonですが、pythonにはprogrammingというクラスはありません.
    cssは適用されません.
    first-schildの応用方法は:
    プログラミングとは、class要素を持つ親要素->その親要素の最初のサブ要素を探してスタイルを適用する方法です.
    last-child
    first-childと同様に、最後のサブ要素を検索し、スタイルを適用します.
    nth-child
    n nサブエレメントnを見つけてスタイルを適用します.
    使用方法:
    .programming:nth-child(3) { color:pink; }
    に示すように、()にスタイルをいくつ目のサブタイプに適用するかを示す数値を入力します.
    関数形式で数値を記述することもできます.
    (2 n)のように偶数要素が入力される(nは自然数が入力される)
    このほか、パリティなどを入力することもできます.
    例:
    <ol>
  <li class="programming">python</li>
  <li class="programming">java</li>
  <li class="programming">javascript</li>
  <li class="programming">c++</li>
    理由を表す
    .programming:nth-child(even) {color:pink;}
    適用する場合
    1. python
    2. java
    3. javascript
    4. c++
    同じ結果が得られます.
    nth-childと同様の仮想クラスセレクタにはnth-of-typeがある.
    <section>
  <div class="fruit">Watermelon</div>
  <p class="fruit">Cherry</p>
  <p class="fruit">Melon</p>
  <p class="fruit">Strawberry</p>
  <div class="fruit">Mango</div>
    上のhtmlでnth-of-typeを理解します.
    first-of-type
    上のhtmlで
    p:first-child { color: red; }
    適用すると、pタグの親の最初のサブ要素はdivであるため、何も変化しません.
    でも、
    p:first-of-type { color: red; } 適用するとCherryの色が赤になります.
    p:first-of-typeはpラベルを検索>から最初のpラベルを選択するためです.
    注目すべきは、
    もし、もし
    .fruit:first-of-type {color: red;}
    適用すると、
    「Watermelon」と「Cherry」は同じように赤に適用されます.
    これはfirst-of-typeのメカニズムを適用するためです
    1.classが果物であることを探す->2彼らの中で「div」の最初のWatermelonを選んだ.
    -> 3. < p>の最初のCherryが選択されるからです.
    上のhtmlなら
    <section>
  <div class="fruit">Watermelon</div>
  <p class="fruit">Cherry</p>
  <p class="fruit">Melon</p>
  <div class="fruit">Strawberry</p>
  <span class="fruit">Mango</div>
    上のように修正するfruit:first-of-type {color:red;}適用する場合
    Watermelon
    Cherry
    Melon
    Strawberry
    Mango
    同じ結果になる
    Last-of-typeやnth-of-type()にも似たような動作があります.last-child、nth-childと同様に、最後の属性、n個の属性と理解すればよい.
    not
    notコレクタ
    selector a:not(selector b) {}
    使用します.
    セレクタaを使用して要素を選択することができるが、セレクタbに対応する要素以外の要素にのみスタイルを適用する.
    <form>
  <input type="text" placeholder="이름">
  <input type="email" placeholder="이메일 주소">
  <input type="password" placeholder="비밀번호">
  <input type="submit">
</form>
    上記htmlで
    input { background-color: indianred; }
    適用すると、inputラベルの背景色はすべてインディアン赤に変更されます.
    要素を1つも適用せずにバックグラウンドカラーを適用する場合は、[not](not)コレクターが使用されます.
    たとえば、パスワード以外でのみシェーディングしたい場合は、
    <form>
  <input type="text" placeholder="이름">
  <input type="email" placeholder="이메일 주소">
  <input class="pw" type="password" placeholder="비밀번호">
  <input type="submit">
</form>
    pwという名前のクラスをパスワードに追加します.
    input:not(.pw) {background-color: indianred;}
    上記のCSSを適用すると、pwレベルの要素以外の要素にのみ背景色が設定されます.
    もちろんclassを追加する必要はありませんが、プロパティコレクタ()を使用します.
    input:not([type=password])
    に示すように、同じ結果が表示されます.
    • JavaScriptでオブジェクトの配列からオブジェクトのインデックスを取得する方法は?
    【白俊アルゴリズム】10815号:デジタルカード