ハイパーコネクションの4つの状態の応用_HTML/Xhtml_Webページ制作の詳細説明

考えられる原因はブラウザーの問題であると考えられますが、スタイル定義の順序が間違っている可能性が高くなります。さまざまな状態で接続スタイルを確実に確認できるようにするには、正しいスタイルの順序は次のとおりです:

「リンク - 訪問済み - ホバー - アクティブ」または「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: マゼンタ;} /*特異性 = 1,1 */A:visited {color: purple;} /* 特異性 = 1,1 */

これらはハイパーリンクのスタイル設定です。ほとんどの場合、複数のスタイルを同時に設定する必要があります。たとえば、未訪問のハイパーリンクでは、マウスをホバーしているときとクリックしているときの「マウス ホバー」と「マウスのアクティブ化」の 2 つの状態で異なるスタイルを設定できます。上記の 3 つのルールはすべてハイパーリンクに適用でき、すべてのセレクターが同じ特異性を持つため、ルールに従って最後のスタイルが「優先」されます。したがって、「アクティブ」スタイルは常に「ホバー」スタイルによってオーバーライドされるため、表示されることはありません (つまり、「ホバー」が優先されます)。ここで、訪問済みのハイパーリンクに対するマウスオーバーの影響を分析しましょう。その「訪問済み」スタイルは常に他の状態スタイル ルール (「アクティブ」および「ホバー」を含む) より優先されるため、結果は常に紫色になります。

これが、CSS1 がスタイルの順序を推奨する理由です:

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

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

CSS2 では、疑似クラスを「共用体グループ」の形式で表示できるようになりました。例:

A:visited:hover {color: maroon;} /* 特異性 = 2,1 */A:link:hover {color: マゼンタ;} /* 特異性 = 2,1 */A:hover:active {color : シアン;} /* 特異性 = 2,1 */

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

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

これは単純な 10 進数ベースの演算のようです。ただし、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」の後に「ゼロ」が続くものです。次のように、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 のステータスも非常に重要です。続きを読む 情報、練習、もっとスクリプト ホームに来てください!このサイトが気に入ったら宣伝してください！読んでいただきありがとうございます。