CSS 疑似クラスとは何ですか? CSS 疑似クラスの詳細な紹介-CSSチュートリアル-php.cn

初心者でも経験豊富な CSS 開発者でも、おそらく疑似クラスについて聞いたことがあるでしょう。最も有名な疑似クラスはおそらく :hover です。これを使用すると、ポインティングデバイス (マウスなど) がポイントされたときに要素がホバー状態にあるときに要素のスタイルを設定できます。

前回の margin: auto と CSS Floats の紹介に続き、この記事では疑似クラスについて詳しく見ていきます。疑似クラスとは何なのか、どのように機能するのか、どのように分類するのか、疑似要素とどのように異なるのかを見ていきます。 (推奨チュートリアル: css ビデオチュートリアル )

疑似クラスとは何ですか?

疑似クラスは、CSS を追加するためにキーワードを選択して特別な状態を定義できる HTML 要素です。次のように、コロン構文を使用して CSS セレクターに疑似クラスを追加できます: a:hover{ ... }

CSS クラスは、適用したい HTML に同じスタイルで追加できるものです。 rules トップメニュー項目やサイドバーウィジェットなどの要素のタイトル属性。言い換えれば、CSS クラスを使用して、何らかの点で類似している HTML 要素をグループ化または分類することができます。

疑似クラスは、同じ特性を共有する要素にスタイルルールを追加するためにも使用されるという点で似ています。

ただし、実際のクラスはユーザー定義であり、たとえば、そのクラスが属する HTML 要素の現在の状態に基づいてソースコード内で検出できますが、UA (ユーザーエージェント) ( Web ブラウザとして) < ;div class="myClass">擬似クラスを追加します。

疑似クラスと疑似要素は CSS セレクターで使用できますが、HTML ソースコードには存在しません。代わりに、スタイルシート内でアドレス指定するための特定の条件下で、UA によって「挿入」されます。

疑似クラスの目的

通常の CSS クラスの仕事は、要素を分類またはグループ化することです。開発者は、要素がどのようにグループ化されているかを知っています。「メニュー項目」、「ボタン」、「サムネイル」などのクラスを作成して要素をグループ化し、後で同様の要素のスタイルを設定できます。これらの分類は、開発者自身が指定した要素の特性に基づいています。

たとえば、開発者が

をサムネイルオブジェクトとして使用することに決めた場合、

"thumbnail" クラスを使用してそれを分類できます。

<div class="thumbnail">[...]</div>

ログイン後にコピー

ただし、HTML 要素には、状態、位置、性質、ページやユーザーとの対話に基づいた共通の特性があります。これらは通常、HTML コードではマークされない特性ですが、CSS の疑似クラスを使用してそれらを見つけることができます。たとえば、次のようになります。

1 親要素の最後の子である要素。要素

2、訪問済みリンク

3、全画面要素。

これらは、疑似クラスが通常ターゲットとする特性です。クラスと疑似クラスの違いをよりよく理解するために、クラス .last を使用して、別の親コンテナー内の最後の要素を識別すると仮定します。

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li class="last">item 4</li>
</ul>
 
<select>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option class="last">option 4</option>
</select>

ログイン後にコピー

次の CSS を使用して、これらの最後の子要素のスタイルを設定できます:

li.last {
  text-transform: uppercase;
}
 
option.last{
  font-style:italic;
}

ログイン後にコピー

しかし、最後の要素が変更されるとどうなるでしょうか?さて、.last クラスを前の要素から現在の要素に移動する必要があります。

クラスの更新の問題は、少なくとも要素間で共通する特性についてはユーザーエージェントに任せることができます (最後の要素は可能な限り共通です)。事前定義された :last-child 疑似クラスがあると非常に便利です。この方法では、HTML コードの最後の要素を指定する必要はありませんが、次の CSS を使用してスタイルを設定できます:

li:last-child {
  text-transform: uppercase;
}
 
option:last-child {
    font-style:italic;
}

ログイン後にコピー

疑似クラスのメインタイプ

疑似クラスには多くの種類があり、それらはすべて、アクセスできない、またはアクセスが難しい要素の特性に基づいて要素を見つける方法を提供します。これは、MDN の標準疑似クラスのリストです。

1. 動的擬似クラス

動的擬似クラスは、ユーザー操作に応じて遷移する状態に基づいて、HTML 要素に動的に追加または削除されます。動的疑似クラスの例としては、、、、、およびがあり、これらはすべてアンカータグに追加できます。 :hover:focus:link:visited

a:visited{
  color: #8D20AE;
}
.button:hover,
.button:focus{
  font-weight: bold;
}

ログイン後にコピー

2. 状態ベースの疑似クラス

状態ベースの疑似クラスは、次の場合に要素に追加されます。それは特定の静的状態中間にあります。最も有名な例は次のとおりです。

:checked はチェックボックスに適用できます ()

:fullscreen 現在のディスプレイを全画面表示します。 mode 、