CSS 内のいくつかのセレクター

CSS (Cascading Style Sheets) は、HTML および XML ファイルのスタイルとレイアウトを制御するために使用されるスタイル言語です。 CSS では、セレクターは HTML 要素を選択するために使用されるパターンを指します。セレクターは CSS の最も基本的なコンポーネントの 1 つであり、さまざまな要素にさまざまなスタイルを適用して、Web ページを美しく最適化できます。

CSS には多くの種類のセレクターがあり、それぞれに異なる機能とアプリケーション シナリオがあります。この記事では、読者が CSS の基本をよりよく習得できるように、CSS の一般的なセレクターをいくつか紹介します。

1. タグ セレクター

タグ セレクターは、HTML 要素の名前をセレクターとして選択することを指します。たとえば、すべての段落を選択するには、セレクターとして p を使用できます。 :

p {
  color: red;
  font-size: 16px;
}

上記のコードは、すべての段落のフォントの色を赤に設定し、フォント サイズを 16 ピクセルに設定します。タグ セレクターは、Web ページ内の同じタイプのすべての要素に同じスタイルを適用する必要がある場合に最適です。

2. クラス セレクター

クラス セレクターは、プレフィックスとしてドット (.) を使用し、その後に指定されたクラス名をセレクターとして使用することを指します。例:

.button {
  background-color: blue;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
}

上記のコードは、クラス「ボタン」を持つすべての要素の背景色を青、フォントの色を白、境界線の角を丸く設定します。クラス セレクターは、共通のスタイルを持つ要素のグループを指定するためによく使用されます。

3. ID セレクター

ID セレクターは、プレフィックスとして # を使用し、その後に指定された ID 名をセレクターとして使用します。例:

#header {
  background-color: gray;
  color: white;
  height: 100px;
}

上記のコードは、ID が「header」の要素の背景色をグレー、フォントの色を白、要素の高さを 100 ピクセルに設定します。 HTML 内の各要素の ID は一意であるため、ID セレクターは特定の要素を指定する場合にのみ使用できます。

4. 属性セレクター

属性セレクターとは、角括弧で囲まれた属性名と属性値をセレクターとして使用することを指します。例:

a[href="https://www.google.com"] {
  color: blue;
  text-decoration: none;
}

上記のコードは、href 属性「https://www.google.com」を持つすべてのハイパーリンク要素の色を青に設定し、下線を削除します。属性セレクターを使用すると、要素をより正確に選択し、要素の属性値に基づいてスタイルを定義できます。

5. 子孫セレクター

子孫セレクターとは、要素間の階層関係を指定して選択するセレクターを指します。たとえば、div 要素内の p 要素を選択する場合は、次のコードを使用できます。

div p {
  font-style: italic;
}

上記のコードは、div 要素内のすべての p 要素を斜体に設定します。子孫セレクターを使用して、入れ子構造内の特定の要素を選択することもできます。

6. 子セレクター

子セレクターとは、条件を満たす直接の子要素をすべて選択するセレクターを指します。つまり、「親要素 > 子要素」の形式です。 」。たとえば、クラス「menu」を持つすべての div 要素の直接の子要素 ​​ul を選択する場合、次のコードを使用できます。

div.menu > ul {
  padding-left: 0;
}

上記のコードは、クラス「menu」を持つすべての div 要素を選択します。直接の子要素 ​​ul の左マージン (padding-left) は 0 に設定されます。子セレクターには子孫セレクターと同様の機能がありますが、直接の子要素に対してのみ機能します。

上記は CSS のいくつかの一般的なセレクターです。セレクターが異なると、ニーズに応じて異なる要素スタイルを選択して適用できます。これらのセレクターを理解することで CSS の基礎知識をさらに習得し、美しく安定した Web ページを作成できることを願っています。

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