「。」の違いを解読するCSS スタイリングの「#」と「#」
CSS を使用して HTML 要素のスタイルを設定する場合、クラス セレクター (「.」) と ID セレクター (「#」) の区別を理解することが重要です。
クラスセレクター (".")
クラス セレクターは、共有クラス属性に基づいて複数の要素を対象とします。これらは、次のような要素のグループに適用されるスタイルに使用されます。
- .error { color: red; }: クラス「error」を持つすべての要素を選択し、スタイルを適用します。 }: クラス "nav-item" を持つすべての要素を選択し、その背景のスタイルを設定します。
- ID セレクター ("#")
ID セレクターは、その属性に基づいて特定の一意の要素をターゲットにします。 ID 属性。これらは、
#sidebar { width: 200px; など、ページ上で 1 回だけ表示される要素のスタイル設定に使用されます。 }: ID「sidebar」を持つ単一の要素を選択し、その幅を設定します。
- #header { font-size: 2em; }: ID「header」を持つ唯一の要素を選択し、そのフォント サイズを大きくします。
- 特異性
ID セレクターはクラス セレクターよりも高い特異性を持っています。これは、ID セレクターとクラス セレクターが同じ要素に適用され、スタイルが競合する場合、ID セレクターのスタイルが適用されることを意味します。
使用上の推奨事項
クラスselectors- は、複数回出現する要素のスタイリングに適しており、各インスタンスが同じものを共有する必要があります。 style.
ID セレクター- は、ページ上に 1 回だけ表示される固有の要素のスタイルを設定するのに最適です。
追加リソース
[選択ガイド: CSS の包括的なガイド]セレクター](https://web.archive.org/web/20160707052959/http://www.selectutorial.com/css/selector-tutorial.html)
以上がCSS セレクターの「.」と「#」の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。