CSS 疑似クラス セレクターを 5 分で理解する: is :not

この記事では、Css 疑似クラス is と :not を紹介し、is、not、matches、any の関係について説明します

##:not

:not() CSS 疑似クラスは、セレクターのリストに一致しない要素を表します。特定の項目が選択されないようにするため、

#上記は、MDN による not の説明です。

推奨学習:

CSS ビデオ チュートリアル 名前だけで大まかに理解できると思いますが、非選択、括弧内の他の要素は除外します

最も単純な例では、 CSS を使用すると、P タグを除いて HTML を変更せずに、div のフォントの色が青に変更されます。上の例では、疑似クラスではないセレクターの役割を明確に理解できます。

アップグレードしてみましょう。div の spa と p を除いて、他のフォントの色を青に変更してください

<div>
    <span>我是蓝色</span>
    <p>我是黑色</p>
    <h1>我是蓝色</h2>
    <h2 id="我是蓝色">我是蓝色</h2>
    <h3 id="我是蓝色">我是蓝色</h3>
    <h4 id="我是蓝色">我是蓝色</h4>
    <h5 id="我是蓝色">我是蓝色</h5>
</div>

以下のようなもっと簡潔な方法もありますが、現時点では互換性があまり良くないため、

div span,div h2,div h3, div h4,{
  color: blue;
}

Compatibility

IE8 以外の使用は推奨されません。現在、すべての主要なブラウザがサポートしているため、安心して使用できます

:is

:is() CSS 疑似クラス関数はセレクター リストを受け取ります引数として、そのリスト内のセレクターの 1 つで選択できる要素を選択します。これは、大きなセレクターをよりコンパクトな形式で記述するのに役立ちます。

上記は MDN の説明ですis と言う前に、最初にmatches

matches と is? の関係を理解する必要があります。

matches は is の前世ですが、本質的には同じものであり、その使用法もまったく同じです。

matches という単語の意味は、その機能と非常によく一致しますが、 not の真逆の機能があります。as not 逆に、今回は一致が非常に場違いに見え、言葉が十分に簡潔ではないため、名前を変更しました。問題もあります https://github.com/ w3c/csswg-drafts/issues/3258、これが名前変更のソースです。

さて、matches と is が実際には同じものであることがわかりました。では、is はどのように使用されるのでしょうか?

例: ヘッダーとメインの下の p タグにマウスを置くと青色に変わります

div:not(p){
  color: blue;
}

以前の練習

div:not(p):not(span){
  color: blue;
}

メソッドの書き方

div:not(p,span){
  color: blue;
}

上記の例から、is の影響は理解できると思いますが、is の力を完全に反映しているわけではありません。ただし、より多くのコンテンツ、特により多くのレベルを持つコンテンツを選択すると、is を記述する方法はたくさんあることがわかります。簡潔に言うと、MDN の例を使用して、前述の

<header>
  <ul>
    <li><p>鼠标放上去变蓝色</p></li>
    <li><p>鼠标放上去变蓝色</p></li>
  </ul>
  <p>正常字体</p>
</header>
<main>
  <ul>
    <li><p>鼠标放上去变蓝色</p></li>
    <li><p>鼠标放上去变蓝色</p></li>
    <p>正常字体</p>
  </ul>
</main>
<footer>
  <ul>
    <li><p>正常字体</p></li>
    <li><p>正常字体</p></li>
  </ul>
</footer>

の書き込みメソッドを見てみると、ネスト レベルとして次のことがわかります。増加すると、is の利点がますます明らかになります。

#is について話した後は、いずれかを知る必要があります。前述したように、is は一致の置き換えです。

any と is の関係は何ですか?

はい、is は any の代替でもあります。これにより、ブラウザのプレフィックス、選択パフォーマンスなど、any の欠点のいくつかが解決されます。

any はまったく同じ機能を持ちますそのままでは、唯一の違いは、ブラウザーのプレフィックスを追加する必要があることだけです。使用法は次のとおりです。

header ul p:hover,main ul p:hover{
  color: blue;
}

結論

上記の導入部は、 css 擬似クラスは、一致する、一致しない、一致する、および任意のです 組み合わせではないのが一般的な傾向です

この記事は、PHP 中国語 Web サイトの

CSS チュートリアル

列、ようこそからのものです。学ぶために ＃＃＃

以上がCSS 疑似クラス セレクターを 5 分で理解する: is :notの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。