ハイパーコネクティビティの4つの状態の応用を詳しく解説

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

" link - visited - hover - active " または " LVHA " （省略）。

コアコンテンツです。

各セレクタには、"specificity"があります。2 つのセレクタが同じ要素に適用された場合、特異性の高いセレクタが優先されます。たとえば、次のようになります。

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

class class = hithere が設定されている段落の内容は、赤色ではなく緑色で表示されます。どちらのセレクタも色を設定しますが、より高い特異性を持つセレクタが勝利します。

擬似クラスは特異性にどのような影響を与えるのでしょうか？それらは全く同じ重み付けを持ち、以下のスタイルが同じ特異性の重み付けを持ちます。

A:link {color: blue;}のように。/* 特異性 = 1,1 */A:active {color: red;}. /* specificity = 1,1 */A:hover {color: magenta;} /* specificity = 1,1 */A:hover {color: magenta;} /* 特異性 = 1,1 */A:visited { color: purple;} /* 特異性 = 1,1 */

これらは、ハイパーリンクに使用されるスタイル設定です。たとえば、訪問していないハイパーリンクは、マウスのホバーとクリックで、"hover" と "mouse-activated" の状態で異なるスタイルにすることができ、3 つのルールすべてがハイパーリンクに適用可能で、すべてのセレクタが同じ特異性を持つので、ルールに従って、最後のスタイルが "win" になります。つまり、" active "スタイルは、常に" hover "スタイルに上書きされるため（つまり、" hover "優先）、決して表示されることはないのです。では、すでに訪問済みのハイパーリンクにマウスを乗せるとどのような効果があるか分析してみましょう。結果は常に紫色です :( その " visited " スタイルは常に他の状態スタイル規則 (" active " や " hover " など) に優先して、表示されるからです。

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

A:linkA:visitedA:hoverA:active（アクティブ）。

なぜなら、ハイパーリンクは "unvisited"と "visited"の両方の状態を持つことができないからです。( :link は " unvisited " を意味します。なぜそのように定義されていないのかはわかりません。)

CSS2 では、擬似クラスが "union group" として表示されるようになりました。

A:visited:hover{color:maroon;}」と表示されます。/* 特異性 = 2,1 */A:link:hover {color: magenta;}. /* 特異性 = 2,1 */A:hover:active {color: シアン;}. /* 特異性 = 2,1 */

同じ特異性を持つが、根本的に異なる獣に適用されるため、衝突しない。

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

これは10進数ベースの単純な操作のようです。しかし、"specificity" の計算は、10進法のアルゴリズムではできません。例えば、15個のセレクタを一緒に使ったとしても、単純なクラスセレクタよりも "specificity" の加重値は低くなります。例を挙げます。

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

10はquot;10ではなく、quot;1とquot;0が続くので、16進数で表現すると以下のようになります。

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

唯一の問題は、2 つ以上のセレクタを 2 つ目のスタイル ルールに追加しようとすると、"17" という特異性が発生し、再び混乱する可能性があるということです。実際には、特異性は無限大になる可能性があるため、さらなる混乱を避けるために、特異性の値をカンマで区切ることが推奨されます。

ウェブマスターのおすすめ 繰り返し特異性の加重値の計算を練習し、ウェブサイトのCSSの設定は、ページを制御する能力を反映して、動的なWebサイトの開発では、CSSの状態も非常に重要であり、より多くの情報を読んで、より実践、スクリプトの家にもっと！また、このような、より良い、より良い、より良い、より良い、より良い、より良い、より良い、より良い、より良い、より良い。あなたはそれをプロパガンダに代わって、このサイトが好きなら！ （※）。読んでくれてありがとうございます。