CSS は特定のクラスまたは属性なしで要素を選択できますか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS は特定のクラスまたは属性なしで要素を選択できますか?

Susan Sarandon

Jan 03, 2025 pm 10:04 PM

Can CSS Select Elements Without a Specific Class or Attribute?

クラスまたは属性のない要素を選択する CSS を作成できますか?

この問題は、クラスまたは属性を持たない要素を選択したい場合に発生します。特定のクラスまたは属性。たとえば、以下の HTML を考えてみましょう:

<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    </body>
</html>

ログイン後にコピー

この場合、「printable」クラスのない要素、つまり nav と a elements.

解決策:

従来、クラスセレクターに :not() 疑似クラスを適用することでこれを実現できます:

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

ログイン後にコピー

ただし、ブラウザーの互換性を強化するため (IE8 以下では :not() サポートがありません)、要素のスタイルを設定することをお勧めします。「printable」クラスを

持っています。これが現実的でない場合は、マークアップの変更が必要になる場合があります。

考慮事項:

このルール内で設定されたプロパティは、「printable」クラスの子孫に影響を与える可能性があります。たとえば、:not(.printable) で display: none を設定すると、その子孫とその子孫の両方が非表示になります。代わりに、visibility: hidden を使用して、元のレイアウトを維持しながら子孫を表示できるようにすることを検討してください。したがって、注意することをお勧めします。

以上がCSS は特定のクラスまたは属性なしで要素を選択できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。