1. Lvha
は実際にはlvfhaである必要があります。つまり、次のようになります。
a:link {/* 未访问过的超链接的样式 */}
a:visited {/* 访问过的超链接的样式 */}
a:focus {/* 拥有焦点的超链接的样式 */}
a:hover {/* 鼠标悬停的超链接的样式 */}
a:active {/* 被用户输入激活的超链接的样式 */}
これらの5つはすべて疑似カテゴリであり、5つの状態を表します。その中で、リンクと訪問先はハイパーリンク専用であり、リンク疑似カテゴリに分類できます。フォーカス、ホバー、アクティブは、動的と呼ばれるハイパーリンクに加えて他の要素にも適用できます。疑似クラス
lvfhaの原則は、上記の5つの疑似クラスがハイパーリンク（href属性を持つタグ）に適用される場合、この固定された順序を遵守する必要があるということです。
2.疑似クラスと疑似要素
疑似クラスはクラスのようなもので、DOMツリーにすでに存在する要素を選択するために使用されます。2つの選択条件があります。
状態：要素が特定の状態にあるかどうか。たとえば、ユーザーがアクセスした（リンク/アクセスした）、現時点でフォーカスがあり、特定の言語環境にある（lang）
構造：要素は、長子（first-child）としての要素、ルート要素（root）としての要素、および多くの構造化された疑似クラス（nth）など、特定のDOM構造要件を満たしていますか？ - 、 - of-typeなど）
疑似要素は要素に似ており、DOMツリーに存在しない要素（または要素の一部）を選択するために使用されます。繁栄している疑似クラスのファミリーと比較すると、疑似要素は少し寂しいようです。これまで（2017/11/4）、CSS3仕様にはまだ4つの疑似要素しかありません（CSS2.1は4です）。
最初の文字：選択した要素に含まれるテキストコンテンツの最初の文字（テキストコンテンツにはサブ要素が含まれます。つまり、ラベルレベル全体でテキストを選択できます）
最初の行：要素に含まれるテキストコンテンツの最初の行を選択します（上記と同じ）
before：コンテンツ生成に使用され、指定された要素コンテンツの先頭に要素が生成されます（生成されたコンテンツは要素コンテンツ領域にあります）
after：コンテンツ生成に使用され、指定された要素コンテンツの最後に要素を生成します（上記と同じ）
疑似クラスと疑似要素の最大の違いは、選択するターゲットコンテンツがDOMに存在するかどうかです。存在は疑似クラスであり、存在しないことは疑似要素です。別の観点から、ドキュメントの特定の部分のスタイルを指定する場合は、最初にコンテンツのこの部分を（セレクターを介して）選択する必要があります。このとき、次の2つの状況が発生します。
ターゲットコンテンツはたまたまラベルでラップされており、ラベル全体のスタイルを設定することで目標を達成できます
ターゲットコンテンツの前後にラベルがなく、スタイルを直接設定することはできません。ターゲットコンテンツを囲む一時的なラベルを挿入してから、この一時的なラベルのスタイルを設定する必要があります。
最初のケースは疑似クラスによって処理されます。疑似クラスセレクターは、特定の状態または特定の構造特性を持つ既存の要素を見つけて、スタイルを適用するために使用されます。2番目のケースは、手動で追加のタグを挿入して最初のケースに変換するか（最初の行などのタグを追加しても一部のシーンを実行できない、またはタグレベル全体のシーン）、または疑似要素で解決できます。これは参照と同等です。仮想タグを挿入してターゲットコンテンツの輪郭を描き、スタイルを適用するのに役立ちます
PS CSS3セレクターの詳細については、CSSセレクター分類の概要を参照してください。
3.タグの6つの状態lvfha疑似クラスは、ハイパーリンクに5つの状態を提供し、6番目はハイパーリンクではなくアンカーポイントを参照します。
リンク疑似クラスの存在の意味の1つは、ハイパーリンクとアンカーを区別することです。リンク疑似クラスは、アンカーではなく、href（つまり、ハイパーリンク）を持つタグにのみ一致します。
一般的なデスクトップブラウザ環境では、タグの6つの状態と対応するトリガーの動作は次のとおりです。
a {/* 处于任意状态的a标签，不论是超链接还是锚点 */}
a:link {/* 未访问过的超链接 */}
a:visited {/* 访问过的超链接，点击超链接再返回当前页，这个超链接就处于visited状态 */}
a:focus {/* 获得焦点的超链接，tab键选中超链接或者长按超链接再移开鼠标 */}
a:hover {/* 鼠标悬停的超链接，鼠标经过超链接时或悬停在超链接上时，这个超链接就处于hover状态 */}
a:active {/* 处于激活状态的超链接，鼠标在超链接上按下时 */}
その中で、フォーカス、ホバー、アクティブを区別するのは簡単ではありません。フォーカスは連続状態ですが、ホバーとアクティブは一時的な状態です。ホバーとアクティブをさらに細かく分割すると、後者は前者の特別な状態になります（タッチデバイスを除く） 、例えば：
a:focus {border: 1px solid green;}
a:hover {border-color: red;}
a:active {border-style: dashed;}
次に、次の連続操作の対応する状態とスタイルは次のとおりです。
按下tab键 -> focus -> 绿色实线边框
点击其它空白处 -> a & link | visited -> 对应样式
鼠标划过时 -> hover -> 无边框
鼠标悬停时 -> hover -> 无边框
鼠标按下 -> focus & hover & active -> 红色虚线边框
鼠标移到超链接之外再抬起 -> focus -> 绿色实线边框
（不点击其它地方的话，超链接将一直处于focus状态）
鼠标划过时 -> focus & hover -> 红色实线边框
フォーカスは連続状態であるため、一時的なホバーの前に配置してアクティブにする必要があります。そうしないと、マウスをスワイプしたときにホバースタイルが表示されません（カスケードルールに従って、最初に宣言されたホバーはフォーカスによって上書きされます）
フォーカス、ホバー、アクティブの3つの状態が重複するため、カスケード結果がスタイルシートライターの期待に応えるように、特定の宣言順序を維持することをお勧めします。また、リンクと訪問は相互に排他的であり、重複がないため、2つの相対的な順序は重要ではありません（vlfhaも合理的であり、「愛と憎しみ」の順序は覚えやすいです）。同様に、link / visitedは永続的な状態であるため、一時的な状態と永続的な状態を実行する機会を与えるために、フォーカス/ホバー/アクティブを後ろに置き、長い状態のカスケード優先度を低くします。 lvfhaの原則
さらに、仕様には、対応するフォーカス、ホバー、およびアクティブの状態の開始条件と終了条件が明確に記載されていません。
CSSは、上記の状態になり得る要素、およびこれらの状態がどのように出入りするかを定義していません。スクリプトは、要素がユーザーイベントに応答するかどうかを変更でき、さまざまなデバイスとUAがさまざまな方法で要素をポイントしてアクティブ化します
CSS 2.1は、「：active」または「：hover」要素の親もこの状態にあるかどうかを定義していません
（5.11.3動的疑似クラスからの抜粋:: hover、：active、および：focus）
したがって、ユーザーエージェントの実装によっては、動的疑似クラスのトリガー動作を判別することも、これらの疑似クラスを適用できる要素（フォーム要素、divなどがサポートされる場合とサポートされない場合がある）を判別することもできません。
4.
カスケードルールを検討するために、結合された疑似クラスのlvfha順序に従うことをお勧めします。そうしないと、上書きされて、同じ名前の無効なルールになる可能性があります。例えば：
a:hover {text-decoration: underline overline;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
テキスト装飾属性は常に次の2つのいずれかで上書きされるため、ホバースタイル（ヒント：マウスの上にあるときに上線と下線の両方を表示する）は有効になりません。
もちろん、前提条件は、スタイルルールが競合する場合（同じ名前とソースの属性、重要度、および特異性が同じである場合）、競合は宣言の順序に従って解決され、lvfhaの順序がこの時点で実際に機能することです。言い換えれば、スタイルの競合がない場合、宣言の順序は重要ではありません
言い換えると、他の方法でスタイルの競合を回避するために、疑似クラスを組み合わせて状態を拡張するなど、lvfhaの順序に従う必要はありません。
/* 不要求顺序 */
:link
:visited
:link:hover
:visited:hover
/* 要求顺序 位于上2行之后 */
:link:active
:visited:active
/* 或者替掉上2行 不要求顺序 */
:link:hover:active
:visited:hover:active
展開後は重複状態がないため、すべてのルールが厳密に相互に排他的になり、当然競合は発生しません。
PS注：IE6-は結合された疑似クラスを正しく処理できないため、最後の1つだけが認識され、lvhaがより広く使用されます（実際、結合された疑似クラスのセマンティクスはより明確であり、「隠された奇妙なルール」はありません）
さらに、ルールをカスケードして、次のような特殊な効果を実現できます。
// 用lhva实现只有未访问的链接才有hover效果
a:link {}
a:hover {}
a:visited {}
a:active {}
以下と同等の非常に興味深いヒント：
a:link:hover {}
これは、組み合わせた疑似クラスの明確な意味上の利点を反映しています
ayqyに連絡する