ホームページ > 記事 > ウェブフロントエンド > スタイル コードをより簡潔にするために、CSS の :is() と :where() について詳しく学習してください。
この記事では、CSS の 2 つのより効率的なセレクターについて詳しく説明します。これらを使用すると、より少ないコードで要素をより効率的に選択でき、コードが簡素化されます。見てみましょう!
初心者が CSS を使い始めるとき、彼らは次の 2 つのことに最も混乱することがよくあります (個人的な考え): 1. CSS はドキュメント フローに基づいており、書かれたコードは次のとおりである場合があります。私の期待と一致しませんでした! 2. 複雑なセレクター。さまざまなシナリオでどのセレクターを使用する必要があります。また、セレクターが長すぎるため、初心者は非常に混乱します。このようなコードは最近、同社のコード内で発見されました。
.home .col .card a i.i1, .home .col .card a i.i2, .home .col .card a i.i3, .home .col .card a i.i4, .home .col .card a i.i5, .home .col .card a i.i5, .home .col .card a i.i6, .home .col .card a i.i7 { background-size: 35px; width: 60px; height: 42px; margin: auto; }
一見すると本当に多くて、引継ぎ担当としては本当にびっくりしました、長すぎます。
あなたの小さな頭を使って、このコードの省略形を簡素化するさまざまな解決策を試してみてください。
この記事では、CSS3 のより効率的なセレクターについて説明し、目を引くセレクターを確保します。
より少ないコードで要素をより効率的に選択できます。 666、すごい! ! !
簡単に言うと、共通のセレクターを抽出してコードを簡素化することです。
注: :is() 元の名前 :match()
シナリオ: フロントエンド開発中に、場合によっては、テキストの色が異なる div 間で一貫している場合があります。
たとえば、以下の 3 つの div では、3 つの div のテキストの色はすべて赤です。
<div class="div1"> <p>p1</p> </div> <div class="div2"> <p>p2</p> </div> <div class="div3"> <p>p3</p> </div>
多くの初心者にとって、次のような書き方が実際に現れるでしょう: 異なる div に同じ p を設定します。
.div1>p{ color:red; } .div2>p{ color:red; } .div3>P{ color:red; }
初心者は、記述するコードの数が増えるにつれて、抽出できる一般的なコードが多数あることに徐々に気づきます。例えば、ここではcolor:redを抽出することができます。おお、コードがすぐに大幅に削減されました。 ! !
.div1>p, .div2>p, .div3>P{ color:red; }
このとき、初心者はcolor:red;を上げられるのだからpにすればいいのではないかと感じました。 そこで、次のより簡潔なバージョンが登場しました。
:is(.div1,.div2,.div3) >P { color:red; }
次のコードを見てください。div の色が赤であり、色が定義は textColor であり、p を黒のままにします。
<div class="textColor"> p1 </div> <div class="textColor"> p2 </div> <div class="textColor"> p3 </div> <p class="textColor">p4</p>
上記の例 1 を読んだ後、初心者の中には次のように書き始める人もいると思います。新しいスタイルを p タグに直接追加します。
:is(.textColor) { color:red; }.pColor{ color: black; } <p class="textColor pColor">p4</p>
ただし: は特定の要素の記述方法をサポートしています。必要なのは、
div:is(.textColor) { color:red; }
div:is(.textColor) :is(h1,h4){ color:red; } <div class="textColor"> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> </div>を前に追加することだけです。 is
: is の重みは、指定された ID、要素、その他のセレクターによって決定されるため、理解するのが難しい場合があります。例を見ればすぐに分かります。
<ol id="olID"> <li>li1</li> <li>li2</li> </ol>
liの文字色を変更してみましょう。
:is(ol) li { color: red; } ol li { color: blue; }
それが何色であるか推測できます。
is blue: Why? まず、is のパラメータは ol で、これは以下の ol セレクターの重みと一致します。また、青が一番下にあるため、ブラウザは自動的に青を使用して赤をカバーします。
以下の記述を見てください。is パラメータに ID を追加します: #olID で、最終的な色は赤です。これは、より高い重みの ID セレクターが使用されるためです。
:is(ol,#olID) li { color: red; } ol li { color: blue; }
::where と :is の構文パラメーターはまったく同じです。唯一の違いは、where の重みが常に 0、つまり最も控えめであることです。 上記と同じ例です。
<ol id="olID"> <li>li1</li> <li>li2</li> </ol>
ここにあります:
:where(ol,#olID) li { color: red; } ol li { color: blue; }
最終結果は青です
is があるのに、なぜ :where が必要なのでしょうか? 個人的には、where は依然として非常に便利だと思います。例えば、コンポーネントライブラリを開発する場合、where の重みが非常に低いため、ユーザーがカバーしやすく、何も必要ありません! imprtant や v-deep などを使用できます。
PS: 序文の小さな栗は最適化できます
元のアドレス: https://juejin. cn/post/7005366966554722312
作成者: フロントエンド ピッカー
プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 !
以上がスタイル コードをより簡潔にするために、CSS の :is() と :where() について詳しく学習してください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。