CSSで訪問済みリンクの色が変わらない問題の解決方法


以下に、いくつかの解決方法とそれに対応するコード例を示します。

  1. :visited 擬似クラスを使用する方法: CSSの :visited 擬似クラスを使用すると、訪問済みのリンクに対して独自のスタイルを適用することができます。ただし、使用できるプロパティに制限があるため、色相や透明度の変更は制限されます。

    a:visited {
     color: red; /* リンクの色を赤に変更 */
    }
  2. リンクの親要素にスタイルを適用する方法: リンクを含む親要素にスタイルを適用することで、訪問済みリンクの色を変更することができます。

    .parent-element a:visited {
     color: blue; /* 訪問済みリンクの色を青に変更 */
    }
  3. JavaScriptを使用する方法: JavaScriptを使用して、リンクがクリックされた時に訪問済みとしてマークし、スタイルを変更することもできます。

    <script>
    function markVisited(link) {
     link.classList.add('visited');
    }
    </script>
    <style>
    .visited {
     color: purple; /* マークされたリンクの色を紫に変更 */
    }
    </style>
    <a href="#" onclick="markVisited(this)">クリックして訪問済みにする</a>

これらの方法を組み合わせることもできます。ただし、セキュリティ上の理由から、訪問済みリンクのスタイルを完全に制御することはできないことに注意してください。