ID セレクターとクラスセレクターの違いは何ですか?-CSSチュートリアル-php.cn

ID セレクターとクラスセレクターの違いは何ですか?

清浅

リリース： 2018-12-14 13:23:39

オリジナル

9867 人が閲覧しました

相違点は、ID セレクターはドキュメント内で 1 回のみ使用できるのに対し、クラスセレクターは複数回使用できることです。クラスセレクターは同じ要素に同時に複数の属性を設定できます。 , しかし、ID セレクターはできません

私は普段コードを書いたり、div や css を使って Web ページを作成するとき、いつもクラスセレクターと ID セレクターを使って CSS スタイルを設定します。次の記事でその使い方を紹介します。クラスと ID セレクター、およびそれらの違いについては、一定の参照効果があります。

#[推奨コース: CSS コース #]

ID セレクター

id は要素を一意に識別し、ファイル内で 1 回だけ使用でき、次のように指定できます。非常に正確に検出されました。特定の要素の前に # 記号があります。

ID セレクター。CSS では、ID セレクターは HTML ドキュメントにスタイルを追加するために使用されます。

例:

<style type="text/css">
#demo{
width:100px;
height: 100px;
background: pink;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="demo">ID选择器</div>
</body>

ログイン後にコピー

レンダリング:

ID セレクターとクラスセレクターの違いは何ですか?

クラスセレクター

クラスセレクターを使用すると、クラスセレクターから独立した方法でスタイルを指定できます。 document 要素は単独で使用でき、他の要素と組み合わせて使用することもできます。

クラスセレクターの前に「.」があります。

Example

<style type="text/css">
.demo{
width:100px;
height: 100px;
background: pink;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="demo">class选择器</div>

ログイン後にコピー

レンダリング:

ID セレクターとクラスセレクターの違いは何ですか?