CSSでよく使われる疑似クラスや疑似要素を使う際のスキルと注意点をマスターする

CSS で一般的な疑似クラスと疑似要素を使用するためのヒントと注意事項を学びましょう

CSS は Web 開発に不可欠な部分であり、Web のレイアウトを制御します。ページのスタイルとレイアウト。 CSS では、疑似クラスと疑似要素は、ページの特定の部分を選択して変更するために使用できる強力なツールです。この記事では、一般的な疑似クラスや疑似要素を使用する際のヒントや注意点、具体的なコード例を紹介します。

1. 疑似クラス

1. :hover 疑似クラス

:hover 疑似クラスは、要素のスタイルを変更するために使用されます。マウスがその上に移動しています。 :hover 疑似クラスを通じて、リンクの色やボタンの背景色の変更などのホバー効果を実現できます。

サンプルコード:

a:hover {
color: red;
}

button:hover {
background-color: blue;
}

注: :hover 疑似クラスは、リンクやボタンなどのインタラクティブな要素にのみ適用できることに注意してください。

2. :アクティブ擬似クラス

:アクティブ擬似クラスは、アクティブ化されたときに要素のスタイルを変更するために使用されます。 :active 疑似クラスを通じて、ボタンが押されたときに背景色を変更するなどのクリック効果を実現できます。

サンプルコード:

button:active {
background-color: green;
}

注: 次の点に注意してください: active pseudo-class要素をクリックした場合にのみ有効になります。

3. :nth-child pseudo-class

:nth-child pseudo-class は、要素の特定の位置を選択するために使用されます。 :nth-child(n) を通じて n 番目の子要素を選択できます。たとえば、:nth-child(2) で 2 番目の子要素を選択できます。

サンプルコード:

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

注意事項: 注意事項 はい, :nth-child 疑似クラスの n は、0 からではなく 1 からカウントされます。

2. 疑似要素

1. ::before 疑似要素

::before 疑似要素は、コンテンツの前にコンテンツを挿入するために使用されます。選択した要素。 ::before 擬似要素を使用すると、要素の前にアイコンやテキストなどを挿入できます。

サンプルコード:

.box::before {
content: "prefix text";
}

注: 注意してください。 ::before 疑似要素は CSS にのみコンテンツを挿入でき、JavaScript や HTML では使用できません。

2. ::after 擬似要素

::after 擬似要素は、選択した要素のコンテンツの後にコンテンツを挿入するために使用されます。 ::after 擬似要素を使用すると、要素の後ろにアイコンやテキストなどを挿入できます。

サンプルコード:

.box::after {
content: "Post text";
}

注: 注意してください。 ::after 疑似要素は CSS にのみコンテンツを挿入でき、JavaScript や HTML では使用できません。

3. ::first-letter 擬似要素

::first-letter 擬似要素は、要素内の最初の文字を選択し、それにスタイルを適用するために使用されます。 ::first-letter 擬似要素を使用すると、最初の文字を大文字にしたり、最初の文字のスタイルを変更したりするなどの効果を実現できます。

サンプルコード:

p::first-letter {
font-size:large;
color:red;
}

注意: ::first-letter 擬似要素は要素内の最初の文字のみを選択できることに注意してください。

3. 注意事項

1. 疑似クラスと疑似要素のセレクターの前に 2 つのコロン (::) を追加して、それらが疑似要素であることを示し、コロンは 1 つだけ追加します。 (:) は疑似要素であることを示します。これは疑似クラスです。
2. 疑似クラスおよび疑似要素の名前は大文字と小文字が区別され、仕様に従って記述する必要があります。
3. 疑似クラスと疑似要素を使用する場合は、要素セレクター、クラス セレクターなどの他のセレクターと組み合わせて使用​​する必要があります。

概要:

疑似クラスと疑似要素は CSS の強力なセレクターであり、豊富なスタイル効果を実現できます。学習して使用する過程では、さまざまな疑似クラスと疑似要素を使用するスキルを習得し、CSS 仕様に従うことに注意する必要があります。疑似クラスと疑似要素を合理的に使用することで、ページの対話性と美観を向上させることができます。

以上がCSSでよく使われる疑似クラスや疑似要素を使う際のスキルと注意点をマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。