CSSでidとclassを併用する原理を詳しく解説

まず、id と class の違いを紹介します: 1. ID は、さまざまな構造とコンテンツを区別するために使用されるラベルです。id は、最初に構造/コンテンツを見つけてから、そのスタイルを定義します。任意の構造とコンテンツに適用できます。クラスは最初にスタイルを定義し、それを複数の構造/コンテンツに適用します。

2. id は要素の名前で、js または他のスクリプトが要素オブジェクトにアクセスするために使用できます。class は要素の CSS クラス名です。

3. スタイルを定義するときは、id="aa" の場合は #aa{...}、class="bb" の場合は .bb{...} を使用します。

4. classはグローバル属性、idはローカル属性です。

すると、コードは次のようになります。

test

#aa{ width:300px;height:50px;background-color:赤 ;}

.bb{ width:100px; height:300px; background-color:blue;}

これはどうやって表示されるのでしょうか？

答えは、幅300、高さ50、背景が赤のテストテキストブロックとして表示します。 class はグローバル属性、id はローカル属性であるため、表示されるスタイルは、class がこの属性を定義した後に新しく定義された id の属性です。 class 属性と id 属性が繰り返される場合は、id 属性が取得されます。これは、プログラミングにおける親子の継承関係に似ています。

以上がCSSでidとclassを併用する原理を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。