ハイパーリンク A マークアップ_HTML/Xhtml_Web ページの制作を学ぶ

Q:
CSS を使用してハイパーリンクのスタイルを定義しましたが、ブラウジング時にホバー (マウスオーバー) が機能しません。なぜこのようなことが起こっているのでしょうか?ブラウザの問題でしょうか？
答え:
考えられる原因はブラウザーの問題であると考えられますが、スタイル定義の順序が間違っている可能性の方が高いです。さまざまな状態の接続スタイルを確実に確認できるようにするには、正しいスタイル順序は
「リンク - 訪問 - ホバー - アクティブ」または「LVHA」(省略形) である必要があります。
主要な内容:
各セレクターには「特異性」があります。2 つのセレクターが同じ要素に適用される場合、より高い特異性を持つセレクターが優先されます。例:
P.hithere {color: green;} /* specificity = 1,1 */
P {color: red;} /* specificity = 1 */
Any set class class=hithere段落のコンテンツは赤ではなく緑で表示されます。どちらのセレクターも色を設定しますが、より詳細なセレクターが優先されます。
疑似クラスは特異性にどのように影響しますか?これらはまったく同じ重み付け値を持ち、次のスタイルは同じ特異性重み付け値を持ちます:
A:link {color: blue;} /* specificity = 1,1 */
A:active {color: red ;} /* 特異性 = 1,1 */
A:hover {color: magenta;} /* 特異性 = 1,1 */
A:visited {color: purple;} /* 特異性 = 1, 1 * /
これらはハイパーリンクのスタイル設定です。ほとんどの場合、複数のスタイルを同時に設定する必要があります。たとえば、未訪問のハイパーリンクでは、マウスをホバーしているときとクリックしているときの「マウス ホバー」と「マウスのアクティブ化」の 2 つの状態で異なるスタイルを設定できます。上記の 3 つのルールはすべてハイパーリンクに適用でき、すべてのセレクターが同じ特異性を持つため、ルールに従って最後のスタイルが「優先」されます。したがって、「アクティブ」スタイルは常に「ホバー」スタイルによってオーバーライドされるため、表示されることはありません (つまり、「ホバー」が優先されます)。ここで、訪問済みのハイパーリンクに対するマウスオーバーの影響を分析しましょう。その「訪問済み」スタイルは常に他の状態スタイル ルール (「アクティブ」および「ホバー」を含む) より優先されるため、結果は常に紫色になります。
これが、CSS1 がスタイルの順序を推奨する理由です:
A:link
A:visited
A:hover
A:active
実際には、最初 2 つのスタイルの順序は次のとおりです。ハイパーリンクは「未訪問」と「訪問済み」の両方の状態を同時に持つことができないため、逆になります (:link は「未訪問」を意味します。なぜこのように定義されないのかはわかりません。)
CSS2 では、疑似-クラスを「結合グループ」の形式で表示します。例:
A:visited:hover {color: maroon;} /* specificity = 2,1 */
A:link:hover { color: magenta ;} /* 特異性 = 2,1 */
A:hover:active {color: シアン;} /* 特異性 = 2,1 */
それらは同じ特異性を持っていますが、根本的に異なる獣に適用されますたとえば、ホバーアクティブな組み合わせを取得できます。
この記事に含まれる「特異性」を理解するにはどうすればよいですか? 特異性は、単純に結合されている文字列ではなく、文字列を理解することができます。上:
P.hithere {color: green;} /* specificity = 11 */
P {color: red;} /* specificity = 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 " は実際には、"10" ではなく、"1" の後に "0" が続くものです。次のように、16 進数を使用して前のスタイル ルールの詳細性を記述することができます:
.hello {color: red;} / * 固有性= 10 */
HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;} /* specificity = F */
唯一の問題は、2 番目が必要かどうかです。スタイル ルールに 2 つ以上のセレクターを追加すると、特異性が "17" になる可能性があり、再び混乱が生じます。実際、特異性は無限である可能性があるため、さらなる混乱を避けるために、特異性の値をカンマを使用して区切ることをお勧めします。

ウェブマスターの提案: 特異性の重み付け値の計算を繰り返します。動的 Web サイト開発では、CSS のステータスも非常に重要です。もっと情報を知り、もっと練習し、もっとスクリプト ホームに来てください!このサイトが気に入ったら宣伝してください！読んでいただきありがとうございます