擬似クラスは架空の状態または特殊な属性を持つ要素であり、cssを使用してスタイル修飾することができる.よく見られるいくつかの偽類は次のとおりです.

:link ,:visited,:hover,:active,:first-child,:nth-child,:nth-of-type

擬似クラスの前には常にコロン(:)が付けられます.:link疑似要素はリンクの正常な状態を表し、アクセスされていないリンクを選択する.visited擬似クラスは、すでにアクセスされているリンクに使用されます.:hover擬似クラスは、ユーザのマウスがリンクの上にあるときに要素のスタイルを修飾するために使用される.:activeマウスクリック時のアクティブ化を示します.ここで宣言する必要があります.:link擬似要素は、このカテゴリのすべての擬似要素の前に宣言する必要があります.その順番は:link・、:visited、:hover、:active.p:nth-child（n）2つを満たす:1、p要素2、親要素のn番目の子であるp:nth-of-type（n）親要素のn番目の段落(p)の偽要素は、仮想的な要素がHTML要素と同じように扱うことができることを示す.違いは、ドキュメントツリーまたはDOMには存在しません.これは、実際に偽要素を指定していないことを意味しますが、CSSを使用して作成できます.
よく見られるいくつかの偽元素

:after,:before,:first-letter

擬似要素では、css 3は2つのコロン(::)を導入しますが、ブラウザとの互換性を向上させるために、単一のコロン(:)を使用することもできます.しかし、いくつかの要素には2つのコロンを使用する必要があります::backdrop.
疑似エレメントがCSSによって生成されるコンテンツは、content属性結合:beforeまたは:after疑似エレメントによって実現される.

::BEFORE/:BEFORE

:before擬似要素とその兄弟:after別のHTML要素にコンテンツ(テキストまたはグラフィック)を追加するために使用される.同様に、追加されたコンテンツはDOMに実際には存在しないが、操作可能である.また、コンテンツの属性はCSSで宣言する必要があります.
この擬似要素を使用して追加したテキストは選択できないことを覚えておいてください.
HTML:

Ricardo

CSS:

h1:before {
    content: "Hello "; /* Note the space after the word Hello. */
}

次のようにレンダリングされます.

Hello Ricardo!

注意:「Hello」のスペースも同時に追加されました.

::AFTER/:AFTER

:afterダミー要素は、別のHTML要素にコンテンツを追加するために使用される(同様にテキストまたはグラフィックである).追加されたコンテンツはDOMには存在しませんが、操作可能です.よりよく機能するためには、コンテンツ属性をCSSで宣言する必要があります.
なお、この擬似要素を使用して追加した内容は選択できません.
HTML:

Ricardo

CSS:

h1:after {
    content: ", Web Designer!";
}

レンダリングの結果は次のとおりです.

Ricardo, Web Designer!

::BACKDROP (EXPERIMENTAL)

::backdropダミーエレメントはボックスであり、フルスクリーンエレメントの後に生成されるが、他のすべてのコンテンツの上にある.これはよく:fullscreen擬似クラスと組み合わせてスクリーンの背景色を最大化します.デフォルトの黒を使用したくない場合は.
注意:::backdrop疑似要素は二重コロンを使用する必要がありますが、単一コロンを使用しても機能しません.
再度、:fullscreen擬似クラスの例を続けてみましょう.
HTML:

This heading will have a solid background color in full-screen mode.
Trigger full scre

::FIRST-LETTER/:FIRST-LETTER

:first-letter擬似要素は、テキストの最初の文字を選択するために使用される.
最初の行のテキストに画像、プレーヤー、テーブルなどの要素が含まれている場合、最初のアルファベットは影響を受けずに選択できます.
これは、画像や外部設定を使用する必要がない場合に、段落の魅力を高めるなど、段落において良い応用です.
ヒント::before擬似要素を使用して生成されたコンテンツテキストは、DOMに存在しなくても、そのテキストの最初のアルファベットを指定できます.
CSS:

h1:first-letter  {
    font-size: 5em;
}

::FIRST-LINE/:FIRST-LINE

:first-line疑似エレメントは、エレメントの最初の行を指定します.ブロックレベルの要素で機能し、行内の要素では機能しません.
段落で使用する場合、たとえば、テキストが包まれていても、段落の最初の行のテキストにスタイルを変更します.
CSS:

p:first-line {
    background: orange;
}

セレクタ優先度

まず、cssセレクタ(cssセレクタ)にはどのようなものがありますか?
1.ラベルセレクタ(body,div,p,ul,liなど)
2.クラスセレクタ(例:class=“head”、class=“head_logo”)
3.IDセレクタ(id=“name”、id=“name_txt”など)
4.グローバルセレクタ(例:*番)
5.セレクタの組み合わせ(例:.head.head_logo、注意両セレクタはスペースキーで区切られている)
6.子孫セレクタ(#head.nav ulli親セットから子孫セットへのセレクタなど)
7.グループセレクタdiv,span,img{color:Red}は、同じスタイルのラベルグループ表示である
8.セレクタの継承(div pなど、2つのセレクタがスペースキーで区切られていることに注意)
9.擬似クラスセレクタ(例えば、リンクスタイル、a要素の擬似クラス、4つの異なる状態:link、visited、active、hover).
10.文字列が一致する属性選択子(^$*の3種類で、それぞれ開始、終了、含む)
11.サブセレクタ(div>p、大きい番号付き)
12.CSS隣接兄弟セレクタ(例:h 1+p、プラス記号+)

優先度

属性の後に異なるレベルで使用!importantは、ページ内の任意の場所で定義された要素スタイルを上書きします.スタイル属性として要素に書き込まれるスタイル1、idセレクタ2、クラスセレクタ|ダミークラスセレクタ(nth-childなど)|属性セレクタ([title])3、ラベルセレクタ4、ワイルドカードセレクタ5、ブラウザカスタマイズまたは継承

//css
:first-child{
    color:green;
}.aa{
color: red;
}[title]{
    color:blue;
}
//dom
 
f

以上のcssは互いに総括的なソートを上書きします:!important>行内スタイル>IDセレクタ>クラスセレクタ=擬似クラス=プロパティ>ラベル>ワイルドカード>継承>ブラウザデフォルトプロパティリファレンスリンクhttps://www.w3cplus.com/css/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements.html