スタイル コードをより簡潔にするために、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 のより効率的なセレクターについて説明し、目を引くセレクターを確保します。

:is

より少ないコードで要素をより効率的に選択できます。 666、すごい！ ！ ！

簡単に言うと、共通のセレクターを抽出してコードを簡素化することです。

注: :is() 元の名前 :match()

例 1. Global:is

シナリオ: フロントエンド開発中に、場合によっては、テキストの色が異なる 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;
}

上級版(:is)

このとき、初心者はcolor:red;を上げられるのだからpにすればいいのではないかと感じました。 そこで、次のより簡潔なバージョンが登場しました。

:is(.div1,.div2,.div3) >P {
  color:red;
}

例 2 特定の要素: is

次のコードを見てください。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;
}

multiple:is

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

Weight

: 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

::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 サイトの他の関連記事を参照してください。