CSS IDセレクターとクラス...ログイン

CSS IDセレクターとクラスセレクターの違い

前のセクションでは、いくつかの基本的なセレクターを紹介しました。このセクションでは、id 属性と class 属性の違いを説明します。

これらは Web ページ全体を豊かでカラフルにするために連携します。要素のスタイルを定義するとき。 ID またはクラスを使用できます。しかし、この 2 つの違いにも注意を払う必要があります。

1. CSS スタイルシートで記述する場合、ID セレクターの前に接頭記号「#」を追加し、クラス セレクターの前に接頭記号「.」を追加する必要があります。

2. id 属性は通常、ページ内で 1 回のみ使用できますが、クラスは複数回参照できます。

3. ID はさまざまな構造やコンテンツを区別するための要素のタグとして使用され、クラスはあらゆる構造やコンテンツに適用できるスタイルです。

4. レイアウトの考え方に関しては、一般にこの原則に従います。ID は最初にページの構造とコンテンツを決定し、次にそのスタイルを定義します。逆に、クラスは最初にスタイルのタイプを定義し、次にスタイルを定義します。必要に応じて、クラス スタイルをさまざまな要素やコンテンツに適用します。

5. 現在、ブラウザでは同じ属性値を持つ複数の ID を同じページに表示できますが、JavaScript を使用して要素を制御するとエラーが発生します。

6. 実際のアプリケーションでは、クラスはテキストセクションやページの変更によく使用されますが、IDはグランドレイアウトの実装や、含まれるブロックや含まれるボックスのスタイルの設計によく使用されます。

注:

IDは、特に「個人」を指すものであり、優先度が高くユニークであるという性質を持っています。
ID と比較して、クラスの優先度は比較的中程度であり、具体的には「特定のグループ」を指します。
クラスを使用するには、オブジェクト指向の抽象概念を参照し、共通の属性を抽象化する必要があります。

ID は最初に構造/コンテンツを検索し、次にそのスタイルを定義します。
クラスは最初にスタイルを定義し、それを複数の構造/コンテンツに適用します。



次のセクション
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>id和class</title> <style> /*id选择器*/ #rrrrr { background-color: red; } /*类选择器*/ .important { color: aqua; font-size:smaller; } /*类选择器*/ .important2222 { font-size:larger; background-color:black; } </style> </head> <body> <!--可以同时使用多个类--> <div class="important important2222"> 1、人生最精彩的不是成功的那一瞬间,而是回头看,那段漆黑看似没有尽头、苦苦摸索的过程。其实,我只是很在意,在意在我所在意的人的心里,我,在哪个位置。 </div> <h1> 1、人生最精彩的不是成功的那一瞬间,而是<span>3333333333</span> </h1> <p> 2、生活再不如人意,都要学会自我温暖和慰藉,<br /> 给自己多一点欣赏和鼓励。生活就是童话,<br /> 只要心存美好,结局就会是美好。<br /> </p> <p id="rrrrr"> 3、旁观者的姓名永远爬不到比赛的计分板上。 </p> <p> 4、强烈的信仰会赢取坚强的人,然后又使他们更坚强。 </p> <p> 5、只要我们能梦想的,我们就能实现。 </p> <p> 6、每一个成功者都有一个开始。勇于开始,才能找到成功的路。 </p> </body> </html>
コースウェア