CSSセレクターの正しい使い方-CSSチュートリアル-php.cn

CSSセレクターの正しい使い方

WBOY

リリース： 2024-01-13 10:38:06

オリジナル

1083 人が閲覧しました

CSSセレクターの正しい使い方

CSS セレクターの正しい使用方法

CSS (Cascading Style Sheets) セレクターは、スタイルを選択して HTML 要素に適用するための重要なツールです。 CSS セレクターを適切に使用すると、Web ページのスタイルをより正確かつ柔軟にすることができます。以下では、CSS セレクターの正しい使用方法と具体的なコード例を詳しく説明します。

1. 基本セレクター

要素セレクター: HTML 要素のタグ名を選択してスタイルを適用します。たとえば、すべての段落 (p) 要素のフォントの色を赤に設定するには:

p {
  color: red;
}

ログイン後にコピー

クラスセレクター: HTML 要素のクラス名を選択してスタイルを適用します。クラスセレクターはピリオド (.) で始まり、その後にクラス名が続きます。たとえば、クラス名が「intro」のすべての要素の背景色を黄色に設定するには:

.intro {
  background-color: yellow;
}

ログイン後にコピー

ID セレクター: HTML 要素の ID を選択してスタイルを適用します。 ID セレクターはシャープ記号 (#) で始まり、その後に ID 名が続きます。たとえば、ID 名が「logo」の要素の幅を 200 ピクセルに設定するには、次のようにします。

#logo {
  width: 200px;
}

ログイン後にコピー

2. 組み合わせセレクター

子セレクター: スタイルを適用します。要素の子要素を選択します。サブセレクターでは大なり記号 (>) を使用します。たとえば、article 要素の下にあるすべての p 要素のフォントサイズを 14 ピクセルに設定するには:

article > p {
  font-size: 14px;
}

ログイン後にコピー

子孫セレクター: 要素の子孫要素を選択してスタイルを適用します。子孫セレクターではスペースが使用されます。たとえば、親要素クラス「セクション」の下にあるすべての p 要素のフォントの色を緑色に設定するには:

.section p {
  color: green;
}

ログイン後にコピー

隣接する兄弟セレクター: で選択することによって、スタイルが要素のに適用されます。隣接する兄弟要素。隣接する兄弟セレクターにはプラス記号 ( ) が使用されます。たとえば、ID「header」の後に表示されるすべての p 要素のフォントを太字に設定するには:

#header + p {
  font-weight: bold;
}

ログイン後にコピー

一般的な兄弟セレクター: スタイルを適用する要素との兄弟関係を選択します。すべての要素。ユニバーサル兄弟セレクターではチルダ (~) が使用されます。たとえば、ID が「sidebar」の後に表示されるすべての div 要素の境界線を 1 ピクセルの実線に設定するには:

#sidebar ~ div {
  border: 1px solid;
}

ログイン後にコピー

3. 属性セレクター

a[href] {
  text-decoration: underline;
}

ログイン後にコピー

a[target="_blank"] {
  color: blue;
}

ログイン後にコピー

a[href^="http"] {
  color: red;
}

ログイン後にコピー

4. 疑似クラスセレクター

Pseudo-クラスセレクターは、要素の特別な状態または位置を選択できます。一般的な疑似クラスセレクターには、:hover、:active、:focus などが含まれます。これらは、マウスオーバー、アクティブ化、フォーカスなどの状態で要素を選択するために使用されます。疑似クラスセレクターの一般的な例をいくつか示します。

a:hover {
  color: purple;
}

ログイン後にコピー

li:nth-child(even) {
  background-color: lightgray;
}

ログイン後にコピー

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