CSSを使用してハイパーリンクのスタイルを定義しましたが、閲覧時にホバー(マウスホバー)は機能しません。なぜこれが起こっているのですか?それはブラウザの問題ですか?
答え:理由はブラウザの問題であると考えていますが、スタイルの定義が誤った順序である可能性が高くなります。さまざまな状態で接続スタイルを確認できるようにするために、正しいスタイルの順序は次のとおりです。リンク - 訪問 - ホバー - アクティブまたはLVHA(略語)。
コアコンテンツ:
各セレクターには特異性があります。 2つのセレクターが同じ要素に適用されると、特異性が高いセレクターが勝ち、優先されます。例えば:
p.hithere {color:green;} / * discileity = 1,1 * /
p {color:red;} / * disciletity = 1 * /
クラスクラス= hithereの段落コンテンツは、赤ではなく緑色で表示されます。両方のセレクターには色が設定されていますが、特異性が高いセレクターが勝ちます。
擬似クラスは特異性にどのように影響しますか?それらはまったく同じ重み付け値を持ち、次のスタイルには同じ特定の重み付け値があります。
A:link {color:blue;} / * disciletity = 1,1 * /
A:Active {color:Red;} / * discileity = 1,1 * /
A:HOVER {color:Magenta;} / * discileity = 1,1 * /
A:訪問{色:紫;} / *特異性= 1,1 * /
これらは、ハイパーリンクのスタイル設定です。ほとんどの場合、これらのスタイルのいくつかを同時に設定する必要があります。たとえば、ホバリングとクリック時に、マウスのホバーとマウスの活性化の両方で、異なるスタイルで訪問されていないハイパーリンクを設定できます。上記の3つのルールはハイパーリンクに適用できるため、すべてのセレクターは同じ特異性を持っているため、ルールに従って最後のスタイルが勝ちます。したがって、アクティブスタイルは常にホバースタイルで覆われているため、決して表示されません(つまり、ホバーが推奨されます)。それでは、訪問されたハイパーリンクマウスオーバーの効果が何であるかを分析しましょう。結果は常に紫色です:(訪問されたスタイルは常に他の州のスタイルのルール(アクティブとホバーを含む)よりも優先されるためです。
これが、CSS1がスタイルの順序を推奨する理由です。
A:リンク
A:訪問
A:ホバー
A:アクティブ
実際、ハイパーリンクが未到達状態とアクセス状態の両方と同時に存在することはできないため、最初の2つのスタイルの順序を交換できます。 (:リンクは訪問されていないことを意味します。なぜこのように定義されていないのかわかりません。)
CSS2により、擬似クラスが組合グループに表示されるようになりました。たとえば、次のようになります。
A:訪問:HOVER {color:maroon;} / * discilety = 2,1 * /
A:リンク:Hover {color:magenta;} / * discileity = 2,1 * /
A:Hover:Active {color:cyan;} / *特異性= 2,1 * /
それらは同じ特異性を持っていますが、根本的に異なる獣に適用されるため、対立しないでください。たとえば、Hover-activeの組み合わせを取得できます。
この記事に関係する特異性を理解する方法は?特異性は、単に接続されていない数字の文字列として理解できます。上記の例:
p.hithere {color:green;} / * discileity = 11 * /
p {color:red;} / * disciletity = 1 * /
これは、小数に基づいた単純な操作のようです。ただし、特異性の計算では、小数点アルゴリズムを使用できません。たとえば、15のセレクターを一緒に使用する場合、特定の加重値は単純なクラスセレクターよりも低くなります。例えば:
.hello {color:red;} / * discileity = 10 * /
html body div ul li li li li li li li li li li li(color:green;} / * disciality = 15 * /
10は実際には、10ではなくゼロに続く特異性です。以下のように、以前のスタイルのルールを説明するために16進数を使用できます。
.hello {color:red;} / * discileity = 10 * /
html body divul li li li li li li li li li li li(color:green;} / * special = f * /
唯一の問題は、2つ以上のスタイルルールに2つ以上のセレクターを追加する場合、再び混乱する特定の17を取得できることです。実際、特異性は無限である可能性があるため、混乱の増加を避けるために、特定の値を分離するためにコンマを使用することをお勧めします。
Webmasterは、特異性の加重値の計算を繰り返します。 WebサイトCSSの設定は、ページを制御する能力を反映しています。動的なWebサイト開発では、CSSのステータスも非常に重要です。詳細を読んで、もっと練習し、wulin.comを詳細にご覧ください!このサイトが気に入ったら、あなたに代わって宣伝してください!読んでくれてありがとう