CSSセレクタクラスとIDの違いは何ですか? HTML での id とクラスの使用法

CSSセレクタクラスとIDの違いは何ですか? HTML での id とクラスの使用法

陳偉良は最近、 SEO対策に取り組んでおり、ウェブサイトのWordPressテーマの最適化を行っている。

HTMLやCSSの基本的な知識はある程度学んだことがありますが、しばらく操作しておらず、特にCSSの部分の使い方は忘れがちです。

そのため、ここに CSS セレクターの ID とクラスの違いと使用法を記録して要約します。

• id は #div に対応します
• クラスは.divに対応

IDとクラスの違い

ID 説明

• id は固定タグで、#div の形式で定義される Web ページのより大きなスタイルを定義するために使用されます
• 例: 列、上、本文、下などの分割...
• 特定の要素を定義するために使用されます。この要素は、XNUMX ページに XNUMX 回だけ表示でき、繰り返し呼び出すことはできません。

クラスの説明

• Class は、Web ページの詳細なスタイルを定義するために使用されるスタイル グループで、.div の形式で定義され、繰り返し使用できます。
• 例: 特定のメニュー、テキスト行など...
• 同じページで、複数の要素から繰り返し呼び出すことができます

div セレクター自体にはプロパティがなく、css を定義することで、div の幅、高さ、背景色、テキスト サイズなどのレイアウトを制御します。

一般的なeコマースサイトやウェブサイト構築プログラムで生成されるHTMLウェブページは、ページレイアウトを実現するためにCSSを使用しています。

セレクターとは？

各 CSS スタイルの定義は、次の 2 つの部分で構成されます。

选择器 {样式}

• {} の前の部分が「セレクター」です。
• 「セレクター」は、それが作用する {} の「スタイル」を示します。
• つまり、Web ページのどの要素でこの「スタイル」が機能するのでしょうか?

コード例

class="sidebar" 要素を選択してスタイルを設定する方法は次のとおりです。

.sidebar
{ 
background-color:black;
}

id="footer" で要素を選択してスタイルを設定する方法は次のとおりです。

#footer
{ 
background-color:black;
}