CSSの基本セレクター

CSS では、セレクターは、スタイルを設定する必要がある要素を選択するために使用されるパターンです。
属性セレクターは、属性と属性値に基づいて要素を選択できます。

3 つの基本セレクター タイプ: タグ名セレクター、クラス セレクター、ID セレクター

注:タグ内に style=" " を記述する方法は CSS である必要があります。セレクターではなく、導入方法です。セレクターがまったく使用されていないためです。

1: タグ名セレクター
HTML文書には、pタグ、h1タグなど、多くのタグがあります。ドキュメント内のすべての p タグに同じ CSS スタイルを使用させるには、タグ セレクターを使用する必要があります。

html {color:black;}
h1 {color:blue;}
p2{color:silver;}

つまり、HTML タグをセレクターとして直接使用します。

2: クラスセレクター
タグセレクターを使用して、HTML ドキュメント全体の同じタグに同じ CSS スタイルを指定します。しかし、実際のアプリケーションでは、HTML文書内で同じタグが繰り返し使用されることになります。同じタグに異なる CSS スタイルを割り当てたい場合は、クラス セレクターを使用する必要があります。

.test {color:red;border:1px blue Solid;}

HTMLドキュメントでは、スタイルを制御するタグの開始タグを配置します（次のようなペアになっていないタグ）直接入力します (ラベルに class="xxx" を追加します)。ページに対応する CSS ファイルで、このラベルを指定するために .xxx を使用できます。このメソッドをクラスを定義して検索します。は: クラスセレクターです。

このクラス定義方法は、フロントエンド開発で最も一般的に使用されるセレクターです。これには、いくつかの優れた機能があります。異なるタグに同じクラスを設定できるため、1 つの CSS コマンドを使用して複数のタグを制御でき、コードの量が大幅に削減されます。第二に、バックグラウンド スタッフはクラスの関連設定を使用する必要がなく、さらにバックグラウンド スタッフと対話する必要もありません。 、ラベルのクラス名は js などを通じて動的に変更できるため、ラベル全体のスタイルが変更され、フロントエンドの動的効果の実装が容易になります。

3: ID セレクター
ID セレクターはクラス セレクターに似ていますが、違いは ID セレクターが再利用できないことです。 XHTML ドキュメントでは、ID セレクターは CSS スタイルを 1 つのタグにのみ割り当てることができます。

#test {color:red;border:1px blue Solid;}

IDを持つHTML要素この ID はバックエンド開発者によって頻繁に使用されるため、フロントエンド開発者はできるだけ使用しないようにする必要があります。