HTML CSS の 3 つの一般的なスタイルセレクター

1: タグセレクター

タグセレクターはすべてのタグに使用されます。ここでは p を例に挙げます。つまり、 p を含むすべてのタグがこのスタイルになります。

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<スタイルタイプ="text/css">
p{font:"宋体"; color:#FF0000}
</スタイル>
</head>
<本文>
<pid="p1">タグセレクターを表示しています</p>
<pid="p2">タグセレクターも使用します</p>
<h1>セレクターによって変更されていません</h1>
</本文>
</html>

2: id セレクター。id="yy" のみがこのスタイルを持ち、ページ内の要素の ID は一意である必要があるため、id セレクターは一意であることに注意してください。。。 id セレクターは # で始まり、次のように使用されることはご存じでしょう: id=""

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<スタイルタイプ="text/css">
#yy{font:"宋体"; color:#FF0000}
</スタイル>
</head>
<本文>
<pid="yy">IDセレクターを表示しています</p>
<pid="p">IDセレクターによって変更されません</p>
<h1>セレクターによって変更されていません</h1>
</本文>
</html>

3: クラスセレクター。クラスセレクターはで始まります。このスタイルを表示するには、要素の class="" を設定するだけです。使用法は次のとおりです: class=""

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<スタイルタイプ="text/css">
.yy{font:"宋体"; color:#FF0000}
</スタイル>
</head>
<本文>
<pclass="yy">クラスセレクターを表示しています</p>
<pclass="yy">クラスセレクターによって変更されません</p>
<h1>セレクターによって変更されていません</h1>
</本文>
</html>

<<: Centos8.3、dockerデプロイメントspringbootプロジェクトの実際のケース分析

>>: CSSはフロントエンドの画像変形の問題を完璧に解決します