ハイパーリンクAタグを学ぶ

ハイパーリンクAタグを学ぶ

聞く:
CSS を使用してハイパーリンクのスタイルを設定しましたが、ホバーしても機能しません。なぜこのようなことが起こるのでしょうか?ブラウザの問題でしょうか?
答え:
ブラウザの問題かもしれないと思うかもしれませんが、スタイル定義の順序が間違っている可能性が高いです。さまざまな状態の接続スタイルを確認できるようにするには、正しいスタイルの順序は次のようになります。
「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 にもっと頻繁にアクセスしてください。このサイトが気に入ったら、ぜひ宣伝してください!読んでくれてありがとう

<<:  CSS3 列を使用したカード ウォーターフォール レイアウトを実装するためのサンプル コード

>>:  MySQL ロック関連知識のまとめ

推薦する

Node はあいまい検索用の検索ボックスを実装します

この記事の例では、検索ボックスでファジークエリを実装するためのNodeの具体的なコードを参考までに共...

Xmeter APIインターフェーステストツールの使用状況の分析

XMeter API は、以下のサービスを含む、JMeter に基づくワンストップのオンライン イン...

Linux システムの .bash_profile ファイルの詳細な説明

目次1. 環境変数$PATH: 2. 環境変数を変更します。 3. bash_profileの目的要...

MySQL の group by と having の詳細な説明

GROUP BY 構文を使用すると、指定されたデータ列の各メンバーに従ってクエリ結果をグループ化して...

Vue2.x の応答性の簡単な説明と例

1. Vue レスポンシブの使用法を確認する​ Vue の応答性は、私たち全員がよく知っています。 ...

MysqlチューニングExplainツールの詳細な説明と実践的な演習(推奨)

MySQL チューニング ツールの詳細な説明と実践的な演習の説明 ツールの紹介の説明 分析例の説明...

MySQLは既存のコンテンツを保持し、後でコンテンツを追加します

このコマンドは、データ テーブル ff_vod を変更し、vod_url フィールドの内容の後に 9...

JS で async await をエレガントに使用する方法

目次jQuery の $.ajax Webpack時代の始まり約束について深く考えるネストをなくすj...

Centos7 システムでの MySQL マスター スレーブ同期構成スキーム

序文最近、高可用性プロジェクトに取り組む際には、データの同期が必要になっています。ノードが 2 つし...

MySQLでSQL文がどのように実行されるかの詳細な説明

概要最近MySQL関連の知識を勉強し始めました。学んだ知識ポイントと自分の理解を元に整理して共有しま...

RHEL7.5 mysql 8.0.11 インストールチュートリアル

この記事はRHEL7.5でのMySQL 8.0.11のインストールチュートリアルを記録しています。具...

親要素に対する CSS 子要素の固定配置ソリューションの詳細な説明

基本概念絶対配置: 絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その包...

Vueはチャットインターフェースを実装する

この記事の例では、チャットインターフェースの表示を実現するためのVueの具体的なコードを参考までに共...

ページ内の検索エンジンの呼び出しはBaiduを例に挙げています

今日、突然、自分のウェブページで Google や Baidu のような強力な検索エンジンを呼び出す...

JavaScriptでフロアナビゲーションエフェクトを作成するプロセスの詳細な説明

目次この期間の目標1. 関数の実装1.1 構造層1.2 スタイルレイヤー1.3 行動層1.3.1 フ...