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

ハイパーコネクションの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 にもっと頻繁にアクセスしてください。このサイトが気に入ったら、ぜひ宣伝してください!読んでくれてありがとう。

<<:  CSS フォーム検証機能の実装コード

>>:  Java は Apache.POI を使用して HSSFWorkbook を Excel にエクスポートします

推薦する

Linuxコマンドをバックグラウンドで実行する方法

通常、ターミナルでコマンドを実行する場合、別のコマンドの入力を開始する前に、現在のコマンドが終了する...

chkconfig および systemctl コマンドを使用して Linux サービスを有効または無効にする方法

これは Linux 管理者にとって重要な (そして素晴らしい) トピックなので、誰もが Linux ...

ウェブページエクスペリエンス: 計画と設計

1. デザインの方向性を明確にする<br />まず、どのユーザーを対象にデザインするのか...

WeChatミニプログラム抽選コンポーネントの使い方

WeChatコンポーネントの形式で提供されます。コンポーネント内部ではasync/awaitが使用さ...

JQueryセレクターの詳細な説明

目次基本的なセレクター:レベルセレクター:属性セレクター:フィルターセレクター:フォーム属性セレクタ...

Mailtoを使えばHTMLでメールを送るのは簡単

最近、顧客のフッターメールボックスにクリックして送信するメール機能を追加しました。Baidu で検索...

テーブルタグ(テーブル)詳細

<br />テーブルは、昔から誰もが使ってきたタグで、今も使われています。しかし、現在の...

HTMLでのラジオ値の取得、割り当て、登録の詳細な説明

1. ラジオのグループ化名前が同じであれば、それらはグループであり、つまり、次のようにグループ内で選...

JavaScriptはフォームデータの非同期取得を実装します

この記事では、フォームデータの非同期取得を実現するためのJavaScriptの具体的なコードを例とし...

CSS スタイルが機能しない (史上最も完全な解決策の概要)

ページを作成するときに、記述した CSS スタイルが有効にならないことがあります。この現象にはさまざ...

MYSQLは、ショッピングカートに追加する際に重複追加を防ぐためのサンプルコードを実装します。

序文最近、仕事の都合で、APP ショッピングカートの注文支払いに取り組んでいました。テスト中にバグが...

Linux システムに docker をインストールし、ssh 経由で docker コンテナにログインする方法

注: 私はCentosを使ってdockerをインストールしていますステップ1: Dockerをインス...

データベースの水平セグメンテーションを実装するための2つのアイデア

導入インターネット アプリケーションの普及に伴い、膨大なデータの保存とアクセスがシステム設計における...

さまざまな MySQL テーブルソートルールのエラーの分析

MySQL が複数のテーブルを結合するときに、次のエラーが報告されます: [Err]1267 – 操...

Docker用国産イメージウェアハウスの使い方

1. 問題の説明何らかの理由により、中国でのDockerイメージのダウンロード速度は特に遅くなります...