CSS テスト ポイントの 1 つ、 タグ、疑似クラス

1. <a> タグで一般的に使用される疑似クラスの概要<a>标签常用的伪类概述

    a:link{color:blue}                                                     
    a:visited{color:red}
    a:hover{color:green}
    a:active{color:purple}

• link 当有链接，且该链接未被访问过时，此伪类处于激活状态。

• vistied 某个链接已经被访问过时，此伪类处于激活状态。

• hover 鼠标悬停在某个链接上时，此伪类处于激活状态，直到鼠标移开链接。

• active 用鼠标点击链接时，此伪类激活。注意，鼠标点击后不松开，此伪类一直激活，直到松开鼠标。

• 二、<a>标签伪类书写顺序详解

• 为什么要考虑伪类的书写顺序？

  第一，CSS（Cascading Style Sheets）全称翻译为层叠样式表。有时候多条规则会定义元素的同一个属性，这时该怎么办呢？CSS用层叠的原则来考虑样式声明，从而判断相互冲突的规则中哪个规则应该起作用。首先，你编写的样式如果与浏览器的默认样式冲突，均以你编写的样式为准。在此基础上，CSS用层叠的原则来考虑特殊性（specificity）、顺序（order）和重要性（importance），从而判断相互冲突的规则中哪个规则应该起作用。不要受这些术语的影响，你只要去试，就能明白CSS决定该应用哪些样式以及何时应用这些样式的方式。¹
  第二，由于<a>标签的这四个伪类的特殊性是一样的，所以当某个链接处于的状态同时激活多个伪类时，那么伪类的书写顺序就起到了关键作用，从而影响最终的显示效果。这就是为什么我们要考虑伪类的书写顺序。

哪些伪类会同时激活并影响显示效果？

  第一，其实:link和:visited两个伪类之间顺序无所谓。因为它俩不可能同时触发，即在未访问的同时访问过。此处注意，有人将:link理解成只要某元素有链接存在，就会激活，这是错误的。当链接被访问过以后，:link就不再激活。我们做个试验。

a:visited{color:red}                                                 
a:hover{color:green}
a:active{color:purple}
a:link{color:blue}

  我们把:link放在最后，开始时链接未访问，无论是我鼠标悬浮还是点击，颜色都不会改变，都是蓝色。当我第一次点击鼠标并松开后，颜色变成红色。然后再悬浮就会变成绿色，再点击，就会变成紫色，再松开就恢复成红色。蓝色不会再出现。此时链接依然存在，只是已经被访问过，所以:link伪类不再激活。
  第二，从用户习惯角度考虑，无论链接访问或未访问过，都希望当鼠标悬浮在链接上时能够产生颜色变化，并且，无论链接访问或未访问过，产生的颜色变化应该是一样的。所以应该把:hover放在:link和:visited后面

a:link{color:blue}                                                 
a:visited{color:red}

a:hover{color:green}

  第三，从用户习惯角度考虑，无论链接访问或未访问过，都希望当鼠标点击链接时能够产生颜色变化，并且，无论链接访问或未访问过，产生的颜色变化应该是一样的。所以应该把:active放在:link和:visited

a:link{color:blue}                                                
a:visited{color:red}

a:active{color:purple}

• linkリンクがあります。この疑似クラスは、リンクにアクセスしていないときにアクティブになります。

• ^{vistied リンクが訪問されると、この疑似クラスはアクティブになります。}
• hover マウスがリンク上にあるとき、この疑似クラスはマウスがリンクから離れるまでアクティブになります。

• active この疑似クラスは、リンクがマウスでクリックされるとアクティブになります。クリック後はマウスが放されないことに注意してください。この疑似クラスはマウスが放されるまでアクティブになります。

• 2. <a>タグ擬似クラスの書き込み順序の詳細な説明

• なぜタグの書き込み順序を考慮する必要があるのか疑似クラス？ 🎜

🎜 まず、CSS (Cascading Style Sheets) の正式名称はカスケード スタイル シートと訳されます。複数のルールが要素の同じ属性を定義する場合があります。この場合はどうすればよいでしょうか。 CSS は、カスケード原則を使用してスタイル宣言を検討し、競合するルールのどれを有効にするかを決定します。まず、作成したスタイルがブラウザのデフォルト スタイルと競合する場合は、作成したスタイルが優先されます。これに基づいて、CSS はカスケードの原則を使用して特異性、順序、 重要性を考慮し、競合するルールのうちどのルールを有効にするかを決定します。用語に惑わされずに試してみると、CSS がどのスタイルをいつ適用するかを決定する方法が理解できるでしょう。 🎜1🎜
第二に、<a> タグの 4 つの疑似クラスの特殊性は同じなので、リンクが複数の疑似クラスを起動している状態の場合、同時に疑似クラスの記述順序が重要な役割を果たし、最終的な表示効果に影響します。このため、疑似クラスを記述する順序を考慮する必要があります。 🎜🎜同時にアクティブ化され、表示効果に影響を与える疑似クラスはどれですか? 🎜🎜 まず、実際には、2 つの疑似クラス :link と :visited の間の順序は重要ではありません。これらは同時にトリガーすることができないため、つまり、まだ訪問されていないときに同時に訪問されているためです。ここで、:link を、要素へのリンクが存在する限りアクティブになることを意味すると理解している人もいますが、これは間違いです。リンクにアクセスすると、:link はアクティブでなくなります。実験をしてみましょう。 🎜

a:link{color:blue}                                                   
a:visited{color:red}
a:hover{color:green}
a:active{color:purple}

🎜 最後に :link を付けましたが、最初はマウスをホバーしてもクリックしても色は変わらず、常に青色です。初めてマウスをクリックして放すと、色が赤に変わります。次に、もう一度マウスを置くと緑色に変わり、もう一度クリックすると紫色に変わり、もう一度放すと赤色に戻ります。青は二度と現れません。この時点では、リンクはまだ存在しますが、アクセスされているため、 :link 擬似クラスはアクティブではなくなります。
第二に、ユーザーの習慣の観点から、リンクにアクセスしたかどうかに関係なく、マウスをホバーするとリンクの色が変わることを期待します。訪問したかどうかにかかわらず、色の変化は同じであるはずです。したがって、:hover は :link と :visited の後に配置する必要があります🎜rrreee🎜 第三に、リンクへのアクセスに関係なく、ユーザーの習慣の観点からまたは、リンクにアクセスしていない場合は、マウスでリンクをクリックすると色が変化すると予想され、リンクにアクセスしたかどうかに関係なく、色の変化は同じである必要があります。したがって、:active は :link と :visited の後に配置する必要があります🎜rrreee🎜 4 つ目は、順番に、常に最初にマウスをホバーします。期待される効果は、ホバー時に色が変化し、マウスをクリックすると別の色が変化することです。アクティブの後にホバーを置くと、リンクをクリックすると、アクティブ状態をアクティブにするときに実際にホバー疑似クラスがトリガーされ、その背後にあるアクティブな色がホバーによって上書きされるため、アクティブな色は表示されなくなります。したがって、hover はアクティブの前に来ます。 🎜2🎜🎜rrreee🎜 順序を覚える公式：「LoVe, HA」🎜🎜 CSS テストのポイントの 1 つである <a> 疑似クラス関連の記事は、PHP 中国語 Web サイトに注目してください。 🎜🎜🎜