CSSの基本セレクター
CSS では、セレクターは、スタイルを設(shè)定する必要がある要素を選択するために使用されるパターンです。
屬性セレクターは、屬性と屬性値に基づいて要素を選択できます。
3 つの基本セレクター タイプ: タグ名セレクター、クラス セレクター、ID セレクター
注: タグ內(nèi)に style=" " を記述する方法は CSS である必要があります。セレクターではなく、導(dǎo)入方法です。セレクターがまったく使用されていないためです。
1: タグ名セレクター
HTML文書には、pタグ、h1タグなど、多くのタグがあります。ドキュメント內(nèi)のすべての p タグに同じ CSS スタイルを使用させるには、タグ セレクターを使用する必要があります。
html {color:black;}
h1 {color:blue;}
p2{color:silver;}
つまり、HTML タグをセレクターとして直接使用します。
2: クラスセレクター
タグセレクターを使用して、HTML ドキュメント全體の同じタグに同じ CSS スタイルを指定します。しかし、実際のアプリケーションでは、HTML文書內(nèi)で同じタグが繰り返し使用されることになります。同じタグに異なる CSS スタイルを割り當(dāng)てたい場(chǎng)合は、クラス セレクターを使用する必要があります。
<div class="test">テストコード</div>
.test {color:red;border:1px blue Solid;}
HTMLドキュメントでは、スタイルを制御するタグの開始タグを配置します(次のようなペアになっていないタグ)直接入力します (ラベルに class="xxx" を追加します)。ページに対応する CSS ファイルで、このラベルを指定するために .xxx を使用できます。このメソッドをクラスを定義して検索します。は: クラスセレクターです。
このクラス定義方法は、フロントエンド開発で最も一般的に使用されるセレクターです。これには、いくつかの優(yōu)れた機(jī)能があります。異なるタグに同じクラスを設(shè)定できるため、1 つの CSS コマンドを使用して複數(shù)のタグを制御でき、コードの量が大幅に削減されます。第二に、バックグラウンド スタッフはクラスの関連設(shè)定を使用する必要がなく、さらにバックグラウンド スタッフと対話する必要もありません。 、ラベルのクラス名は js などを通じて動(dòng)的に変更できるため、ラベル全體のスタイルが変更され、フロントエンドの動(dòng)的効果の実裝が容易になります。
3: ID セレクター
ID セレクターはクラス セレクターに似ていますが、違いは ID セレクターが再利用できないことです。 XHTML ドキュメントでは、ID セレクターは CSS スタイルを 1 つのタグにのみ割り當(dāng)てることができます。
<div id="test">テストコード</div>
#test {color:red;border:1px blue Solid;}
IDを持つHTML要素この ID はバックエンド開発者によって頻繁に使用されるため、フロントエンド開発者はできるだけ使用しないようにする必要があります。