ハイパーコネクションの4つの状態の適用の詳細な説明

ブラウザの問題かもしれないと思うかもしれませんが、スタイル定義の順序が間違っている可能性が高いです。さまざまな状態の接続スタイルを確認できるようにするには、正しいスタイルの順序は次のようになります。

「link-visited-hover-active」または「LVHA」（略語）。

コアコンテンツ:

各セレクターには「詳細度」があり、2 つのセレクターが同じ要素に適用された場合、詳細度の高いセレクターが優先されます。例えば：

P.hithere {color: green;} /* 特異度 = 1,1 */ P {color: red;} /* 特異度 = 1 */

class=hithere が設定された段落コンテンツは、赤ではなく緑で表示されます。両方のセレクターで色を設定しますが、より詳細度の高いセレクターが優先されます。

疑似クラスは詳細度にどのように影響しますか?これらはまったく同じ重み付け値を持ち、次のスタイルは同じ詳細度の重み付け値を持ちます。

A:link {color: blue;} /* 特異度 = 1,1 */A:active {color: red;} /* 特異度 = 1,1 */A:hover {color: magenta;} /* 特異度 = 1,1 */A:visited {color: purple;} /* 特異度 = 1,1 */

これらはハイパーリンクのスタイル設定です。ほとんどの場合、これらのスタイルをいくつか同時に設定する必要があります。たとえば、未訪問のハイパーリンクには、マウスを移動してクリックしたときに「マウスオーバー」と「マウスアクティブ化」で異なるスタイルを設定できます。上記の 3 つのルールはすべてハイパーリンクに適用でき、すべてのセレクターは同じ詳細度を持つため、ルールに従って最後のスタイルが「優先」されます。したがって、「アクティブ」スタイルは常に「ホバー」スタイルによって上書きされるため（つまり、「ホバー」が優先される）、表示されません。次に、訪問済みのハイパーリンクにマウスを移動したときに何が起こるかを分析してみましょう。結果は常に紫色になります :(、これは「訪問済み」スタイルが常に他の状態スタイル ルール (「アクティブ」や「ホバー」を含む) よりも優先されるためです。

このため、CSS1 では次のスタイルの順序を推奨しています。

A:リンクA:訪問A:ホバーA:アクティブ

実際、ハイパーリンクは「未訪問」状態と「訪問済み」状態の両方に同時に存在できないため、最初の 2 つのスタイルの順序は入れ替えることができます。 ( :link は「未訪問」を意味します。なぜそのように定義されないのかはわかりません。)

CSS2 では、擬似クラスを「グループ」内に表示できるようになりました。次に例を示します。

A:visited:hover {color: maroon;} /* 特異度 = 2,1 */A:link:hover {color: magenta;} /* 特異度 = 2,1 */A:hover:active {color: cyan;} /* 特異度 = 2,1 */

これらは同じ特異性を持っていますが、根本的に異なる獣に適用されるため、競合しません。たとえば、ホバーアクティブの組み合わせを取得できます。

この記事に含まれる「特異性」をどのように理解しますか?特異性は、単純に連結されていない数字の文字列を理解できます。上記の例: P.hithere {color: green;} /* 特異性 = 11 */ P {color: red;} /* 特異性 = 1 */

これは小数点に基づく単純な演算のようです。ただし、「特異度」の計算では 10 進アルゴリズムは使用できません。たとえば、15 個のセレクターを一緒に使用すると、その「特異度」の重み値は、単純なクラス セレクターの重み値よりも低くなります。例：

.hello {color: red;} /* 特異度 = 10 */ HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;} /* 特異度 = 15 */

「10」は実際には「1」の後に「0」が続くもので、「ten」ではありません。 16 進数を使用して、前のスタイル ルールの詳細を次のように記述できます。

.hello {color: red;} /* 特異度 = 10 */ HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;} /* 特異度 = F */

唯一の問題は、2 番目のスタイル ルールに 2 つ以上のセレクターを追加すると、詳細度が「17」になり、再び混乱が生じる可能性があることです。実際には、特異度は無限である可能性があるため、さらなる混乱を避けるために、特異度の値をコンマで区切ることをお勧めします。

ウェブマスターの提案:特定度の加重値を繰り返し計算する練習をしてください。ウェブサイトの CSS 設定は、ページを制御する能力を反映します。動的なウェブサイトの開発では、CSS の状態も非常に重要です。より多くの資料を読み、より多く練習し、123WORDPRESS.COM にもっと頻繁にアクセスしてください。このサイトが気に入ったら、ぜひ宣伝してください！読んでくれてありがとう。