CSSセレクターの使い方

CSS (Cascading Style Sheet) セレクターは、HTML 要素を選択するために使用されるツールです。 CSS セレクターを使用すると、タイプ、属性、ID、またはクラスに基づいて HTML 要素のスタイルを設定できます。セレクターは CSS の基礎であり、セレクターをマスターすることは CSS をマスターするための重要なステップです。

この記事では、一般的に使用される CSS セレクターとその使用法を紹介します。始める前に、いくつかの基本的な知識を理解する必要があります。

1. CSS セレクター構文: セレクターは HTML 要素を指し、その後に 1 対の中括弧 {} が続き、中括弧内にはセミコロンで区切られた属性と値のペアのセット。
2. HTML 要素では、タグ名、クラス名 (id)、および属性をセレクターとして使用できます。
3. 要素には、スペースで区切って複数のクラス名を付けることができます。
4. ID とクラス名は、数字で始めない、特殊文字を含まないなどの命名規則に従う必要があります。

ここで、いくつかの CSS セレクターとその使用方法について詳しく学びましょう。

1. タグ セレクター

タグ セレクターは、最も単純な CSS セレクターです。 HTML 要素のタグ名を使用してスタイルを設定します。タグ セレクターは、このタグのすべての要素に適用されます。

たとえば、すべての段落 (p) に赤いテキストの色を設定するには、次のコードを使用できます:

p {
  color: red;
}

2. Class Selector

クラス セレクター セレクターは、タグにクラス名を追加することによって要素を選択します。クラス名は「.」記号で始まります。

たとえば、次のコードは、「my-class」クラス名を使用するすべての要素のテキストの色を赤に設定します。

.my-class {
  color: red;
}

HTML では、class 属性は任意の要素に適用できます。要素。以下に例を示します。

<div class="my-class">我是一个含有my-class类名的div元素</div>

3. ID セレクター

ID セレクターは、タグに ID 名を追加することによって要素を選択します。 ID名は「#」記号で始まります。

たとえば、次のコードは、ID「my-id」を持つ要素のテキストの色を青に設定します。

#my-id {
  color: blue;
}

HTML では、id 属性は、単一の要素。以下に例を示します。

<div id="my-id">我是一个含有my-id ID名称的div元素</div>

4. 属性セレクター

属性セレクターは、HTML 要素の属性に基づいてスタイルを設定します。角括弧 [] を使用して要素のプロパティにアクセスできるようにします。

たとえば、次のコードは、「href」属性を持つすべての要素のテキストの色を緑色に設定します。

a[href] {
  color: green;
}

または、属性値を使用してスタイルをより細かく設定することもできます。 。たとえば、次のコードは、「href」属性値が「.pdf」で終わるすべてのリンクのテキストの色を赤に設定します。

a[href$=".pdf"] {
  color: red;
}

上記のコードでは、「$=」記号は、属性値は特定の値で終わります。

5. 子孫セレクター

子孫セレクターは、親要素の子要素を選択することによってスタイルを設定します。各タグ名はスペースを使用して区切られます。

たとえば、次のコードはすべての div 要素の a 要素を緑色に設定します。

div a {
  color: green;
}

上記のコードでは、スペース文字が div 要素と a 要素を相互に接続しています。 。

6. 交差セレクター

交差セレクターは、指定されたクラス名とタグ名の両方を持つ要素を選択します。 「.」とタグ名で定義します。

たとえば、次のコードは、「my-class」クラス名と「li」タグ名を持つすべての要素のテキストの色を青に設定します。

li.my-class {
  color: blue;
}

上記のコードでは, "li .my-class" セレクターは、"li" と "my-class" の両方のクラス名を持つ要素にのみ適用されます。

要約:

これまで、一般的に使用される 6 つの CSS セレクターについて学びました。セレクターを理解すると、HTML 要素をより適切に配置し、スタイルを開発するのに役立ちます。セレクターが異なれば必要な HTML 構造も異なるため、実際のニーズに応じて適切なセレクターを選択する必要があります。

CSS セレクターは CSS の非常に重要な知識ポイントであり、フロントエンド開発者にとって、CSS セレクターを習得することは非常に重要なステップです。この記事があなたのお役に立てば幸いです。

以上がCSSセレクターの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。