クラスまたは屬性のない要素を選択する 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() 疑似クラスを適用することでこれを?qū)g現(xiàn)できます:
:not(.printable) {
/* Styles */
}
:not([attribute]) {
/* Styles */
}ただし、ブラウザーの互換性を強化するため (IE8 以下では :not() サポートがありません)、要素のスタイルを設(shè)定することをお勧めします。 「printable」クラスを
持っています。これが現(xiàn)実的でない場合は、マークアップの変更が必要になる場合があります。
考慮事項:
このルール內(nèi)で設(shè)定されたプロパティは、「printable」クラスの子孫に影響を與える可能性があります。たとえば、:not(.printable) で display: none を設(shè)定すると、その子孫とその子孫の両方が非表示になります。代わりに、visibility: hidden を使用して、元のレイアウトを維持しながら子孫を表示できるようにすることを検討してください。したがって、注意することをお勧めします。
以上がCSS は特定のクラスまたは屬性なしで要素を選択できますか?の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。