CSS セレクター セレクターは、CSS Web ページ レイアウトの基礎です。 CSS セレクターとは正確には何ですか?また、それを合理的に使用する方法は何ですか?セレクターは 3 つのカテゴリーに分類できます。HTML セレクターの最初のカテゴリーを除いて、他の 2 つのカテゴリーには自分で名前を付けることができます。名前を付けるときは、コードをよりわかりやすく読みやすくするために、セマンティクスを含めることに注意するか、必要なコメントを追加します。 。
HTMLセレクタータグセレクター
HTML セレクターは、DIV、TD、P、H1 などの HTML タグです。これらを CSS で定義すると、CSS 記事によって制御されるページ内のこのタグのプロパティが定義に従って表示されます。
たとえば、H1 の色を赤にしたい場合は、H1 {color: red} とします。ここでは、ルール内で複数のセレクターを定義できる CSS の機能を学びます。例: H1、H2、TD {色: 赤}。この定義により、H1、H2、TD をすべて赤にすることができます。特定の使用法では、同じ設定を持つ複数の属性を組み合わせて記述することで、コードを減らすことができます。
クラスセレクター クラスセレクター
クラス セレクターには 2 種類あり、1 つは関連クラス セレクターと呼ばれ、HTML タグに関連するものです。その構文は tag.Classname {property:value} です。たとえば、すべてではなく一部の H1 の色を赤に設定したいとします。 H1.redone {color: red}: 最初の H1 は赤ですが、2 番目の H1 は赤ではありません。
2 番目のタイプは、独立したクラス セレクターです。任意の HTML タグで使用できます。その構文は次のとおりです。 Classname {property: value} 以下の定義がある場合、それをさまざまなタグに適用できます。クラスセレクターにより、より多くの自由と余地が与えられることは明らかです。
IDセレクター IDセレクター
実際、ID セレクターの機能は、独立クラス セレクターの機能と非常によく似ています。違いは、それらの構文と使用法が異なり、JavaScript が HTML 要素を操作するのに役立つことです。私たちのレイアウトでは、さまざまな構造領域を定義するために ID セレクターをよく使用します。
その構文は次のとおりです #IDname {プロパティ:値}。 #yelowone {color: yellow} という定義があるとします。この定義は、同じ ID 名の任意のタグに適用できます。例: text ここでは、ID セレクターは独立したクラス セレクターと同じ機能を持っているのに、なぜ両方が存在するのかと思うかもしれません。 ID を持つ HTML 要素は JavaScript で操作できます。