特定の状態 (ホバー、アクセス済み、無効など) を持つ要素を選択する CSS 疑似クラスを使用して、HTML 内の既存の要素に特定のスタイルを追加できます。
注 strong> - CSS 疑似クラスを疑似要素から分離するために、CSS3 では疑似クラスに単一コロン表記を使用します。
以下は要素で CSS 疑似クラスを使用するための構文です-
Selector:pseudo-class { css-property: /*value*/; }
以下はすべて利用可能な CSS 疑似クラスです-
Sr.No | 疑似クラスと説明 |
---|---|
アクティビティアクティビティによって言及された要素を選択します | |
Checked | チェックされたすべての言及された要素を選択します |
It無効にされたすべての言及された要素を選択します #4 |
|
empty | それは選択されます。言及された各要素には何もありませんChildren ##5 |
有効化された各要素が選択されます 6 |
|
親の最初の子である言及された各要素が選択されます 7 |
|
これは、各要素の最初に言及された要素を選択します。親##8 | |
フォーカスのある上記の要素を選択します | #9 | hover
マウスオーバーで言及された要素を選択します | #10 スコープ内 |
#11無効 | |
12lang (Language ) |
|
lang 属性値が「 language 」で始まる、言及されたすべての要素を選択します | 13last-child |
## 14 last-of -type | 親によって最後に言及されたすべての要素を選択します
|
15 リンク | 未訪問のメンション要素をすべて選択します
|
16#not(selector)##言及されていないすべての要素を選択します | |
nth-child(n )親の n 番目の子である言及された各要素を選択します | |
nth-last-child(n)n 番目の子を親レベルとして選択します言及された各要素について、最後の子から数えて | |
nth-last -oftype(n ) | 言及された各要素、つまり、最後の子要素から数えて、親内の n 番目に言及された要素を選択します ##20 |
親要素の n 番目にある、言及された各要素を選択します。 言及された要素 21 |
|
は、親要素に記載されている各要素の唯一の言及として選択されます。#22 | |
言及された各要素をその親の唯一の子要素として選択します | #23 | #オプション
「必須」属性なしで上記の要素を選択します | ##24 範囲外です |
< /p>25 読み取り専用 |
|
#26read-write | |
27required | |
#28 root | ドキュメントのルート要素を選択します
|
29 target | it 現在言及されているアクティブな要素を選択します (アンカー名を含む URL をクリックします) )
|
30 | 有效 它选择具有有效值的所有提到的元素 |
31 | 访问过 它选择所有访问过的提到的元素 |
让我们看一个 CSS 伪类的示例 -
现场演示
CSS Anchor Pseudo Classes
这将产生以下输出 -
让我们看一下 CSS 伪类的另一个示例 -
现场演示
这将产生以下输出 -
当未将鼠标悬停在 div 元素上时 -
当鼠标悬停在 div 元素上时 -
以上がCSS疑似クラスを使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。