[解決済み】CSSで、スタイルのセットを宣言するときの「.」と「#」の違いは何ですか？[重複あり］

質問

とはどのような違いがあるのでしょうか？ # と . ある要素に一連のスタイルを宣言するとき、どれを使うか決定するときのセマンティクスは何ですか？

どのように解決するのですか？

はい、違いますね...。

# は id セレクタ をターゲットにするために使用されます。 シングル は一意な ID を持つ特定の要素ですが、. は クラスセレクタ をターゲットとするために使用されます。 複数 要素を特定のクラスで表示します。別の言い方をすれば

• #foo {} は シングル という属性で宣言された要素に id="foo"
• .foo {} スタイル すべて 要素に、属性 class="foo" (一つの要素に複数のクラスを割り当てることもできます。空白で区切るだけです。 class="foo bar" )

代表的な使用例

一般的には、一度しか表示されないことが分かっているもの、例えば、サイドバーやバナーエリアなどの高レベルのレイアウトDivのようなものをスタイル付けするために、#を使用します。

クラスは、スタイルが繰り返される場合に使用されます。たとえば、エラー メッセージ用の特別な形式のヘッダーを作成する場合、スタイル h1.error {} にのみ適用されます。 <h1 class="error">

特異性

セレクタが異なるもう一つの側面は、その特異性です。idセレクタはclassセレクタよりも特異性が高いと判断されます。これは、スタイル 衝突 で定義されたものが、より特殊なセレクタを上書きします。例えば <div id="sidebar" class="box"> のルールは #sidebar のルールと矛盾する場合は、上書きされます。 .box

CSSセレクタについてもっと知りたい

参照 選択チュートリアル CSS セレクタは非常に強力で、「# は DIV に使うもの」という認識でいるのであれば、CSS をより効果的に利用する方法を学ぶとよいでしょう。

編集：Selectutorialは、空の上の大きなウェブサイトに行ったかもしれないように見えるので、これを試してみてください。 アーカイブリンク 代わりに