CSS 疑似クラスと疑似要素の基本概念と使用シナリオを調べる

CSS 疑似クラスと疑似要素の基本概念とアプリケーション シナリオを理解する

CSS (Cascading Style Sheets) は、Web ページのスタイルを記述するために使用されるマークアップ言語です。 . Web ページ内の要素の外観とレイアウトを制御できます。 CSS では、疑似クラスと疑似要素は、CSS の適用範囲と柔軟性をさらに拡張できる非常に便利な機能です。

1. 擬似クラス

擬似クラスは、特定のステータス要素を選択するために使用されるキーワードです。一般的な疑似クラスには、ホバー、アクティブ、フォーカスなどが含まれます。以下に、いくつかの一般的な疑似クラスの使用例を示します。

1. :hover 疑似クラス

:hover 疑似クラスは、オブジェクトの状態を選択するために使用されます。要素の上にマウスを移動します。

a:hover {
  color: red;
}

2. :active pseudo-class

:active pseudo-class は、クリックされたときの要素の状態を選択するために使用されます。

button:active {
  background-color: blue;
}

3. :focus 擬似クラス

:focus 擬似クラスは、フォーカスされた入力要素を選択するために使用されます。

input:focus {
  border: 2px solid red;
}

2. 擬似要素

擬似要素は、要素のコンテンツの前後に特定のコンテンツを挿入するために使用されるキーワードです。一般的な疑似要素には、前と後が含まれます。以下に、疑似要素の一般的な使用例を示します。

1. ::before 疑似要素

::before 疑似要素は、指定されたコンテンツを前に挿入するために使用されます。要素の内容。

p::before {
  content: "before";
  color: red;
}

2. ::after 疑似要素

::after 疑似要素は、要素のコンテンツの後に指定されたコンテンツを挿入するために使用されます。

p::after {
  content: "after";
  color: blue;
}

3. アプリケーション シナリオ

疑似クラスと疑似要素には、Web ページ スタイルのデザインにおける多くの実用的なアプリケーション シナリオがあります。以下では、疑似クラスと疑似要素の使用を説明するために、一般的な要件を例として取り上げます。

Web ページ上にナビゲーション バーがあり、複数のナビゲーション リンクがあるとします。マウスをナビゲーション リンクの上に置くとナビゲーション リンクの色が変わり、ナビゲーション リンクの間に垂直線の区切り文字を追加します。

HTML コードは次のとおりです:

<div class="nav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

CSS コードは次のとおりです:

.nav a {
  color: black;
  text-decoration: none;
  padding: 10px;
}

.nav a:hover {
  color: red;
}

.nav a:not(:last-child)::after {
  content: "|";
  padding-left: 10px;
  padding-right: 10px;
  color: gray;
}

上記のコードでは、最初にナビゲーション リンクのデフォルトの色とスタイルを設定します。次に、:hover 疑似クラス セレクターを使用すると、マウスがナビゲーション リンク上に移動すると、リンクの色が赤に変わります。

次に、:not 擬似クラス セレクターを使用して、最後のナビゲーション リンクを除く他のリンクを選択します。次に、::after 疑似要素を使用して、各リンクの後にパイプ区切り文字を追加し、区切り文字のスタイルを設定します。

上記のコードにより、ホバー時にナビゲーション リンクの色が変化し、リンク間に垂直線の区切り文字を追加する効果を実現できます。

概要:

疑似クラスと疑似要素は CSS で非常に重要な役割を果たし、より柔軟で複雑なスタイル効果を実現するのに役立ちます。疑似クラスと疑似要素を適切に適用することで、Web ページのスタイルをより適切に制御し、ユーザー エクスペリエンスを向上させることができます。上記の例はそのうちの 1 つにすぎず、実際には、疑似クラスと疑似要素の適用シナリオは他にもあり、実際の開発では継続的な探索と実践が必要です。

以上がCSS 疑似クラスと疑似要素の基本概念と使用シナリオを調べるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。