フロントエンドの疑似クラスセレクターとは何ですか?

フロントエンドの疑似クラス セレクターには、hover、:active、:focus、:first-child、:last-child、:nth-child()、:nth-of-type()、および:が含まれます。待たない。詳細な紹介: 1. :hover 疑似クラス セレクターは、マウスが要素上にあるときにスタイルを適用するために使用されます。マウスがリンク上にあるときに色や背景を変更するなど、インタラクティブな効果を作成するためによく使用されます。 ; 2. :active pseudo-class クラス セレクターは、要素がアクティブになったときにスタイルを適用するために使用されます。

このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。

フロントエンドの疑似クラス セレクターは CSS の非常に重要な部分であり、要素の状態や位置に基づいてスタイルを選択して適用できるようになります。この記事では、一般的なフロントエンドの疑似クラス セレクターをいくつか紹介します。

1. :hover 擬似クラス セレクター

:hover 擬似クラス セレクターは、マウスが要素上にあるときにスタイルを適用するために使用されます。これは、リンク上にマウスを置いたときにリンクの色や背景を変更するなど、インタラクティブな効果を作成するためによく使用されます。

例:

a:hover {
  color: blue;
}

2. :active pseudo-class selector

:active pseudo-class selector は、要素がアクティブ化されたときにスタイルを適用するために使用されます。ユーザーがボタンをクリックしたときにボタンの色や背景を変更するなど、ボタンやリンクのクリック効果によく使用されます。

例:

button:active {
  background-color: yellow;
}

3. :focus 擬似クラス セレクター

:focus 擬似クラス セレクターは、要素がフォーカスを取得したときにスタイルを適用するために使用されます。これは、ユーザーが入力ボックスをクリックしたときに入力ボックスの境界線の色や背景を変更するなど、フォーム要素でよく使用されます。

例:

input:focus {
  border-color: red;
}

4. :first-child 擬似クラス セレクター

:first-child 擬似クラス セレクターは、親の最初の子要素を選択するために使用されます。要素。これは、リストの最初の要素に特別なスタイルを適用するためによく使用されます。

例:

ul li:first-child {
  font-weight: bold;
}

5. :last-child 擬似クラス セレクター

:last-child 擬似クラス セレクターは、親の最後の子要素を選択するために使用されます。要素。これは、リスト内の最後の要素に特別なスタイルを適用するためによく使用されます。

例:

ul li:last-child {
  color: red;
}

6. :nth-child() 擬似クラス セレクター

:nth-child() 擬似クラス セレクターは、選択するために使用されます。特定の位置にある親要素の子要素。選択される子要素の位置を指定するパラメーターを受け入れることができます。

例:

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

7. :nth-of-type() 擬似クラス セレクター

:nth-of-type() 擬似クラス セレクターは、次の目的で使用されます。親要素の特定のタイプの子要素を選択します。選択される子要素の位置を指定するパラメーターを受け入れることができます。

例:

ul li:nth-of-type(2n) {
  color: blue;
}

8. :not() 擬似クラス セレクター

:not() 擬似クラス セレクターは、指定された条件を満たさない要素を選択するために使用されます。条件。除外する要素を指定するパラメーターを受け入れることができます。

例:

input:not([type="text"]) {
  display: none;
}

これらはフロントエンドの一般的な疑似クラスセレクターであり、要素の状態や位置に基づいてスタイルを選択して適用するのに役立ちます。これらの疑似クラス セレクターを柔軟に使用することで、よりインタラクティブな効果やパーソナライズされたスタイルを Web ページに追加できます。

以上がフロントエンドの疑似クラスセレクターとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。