a:focus与a:link样式的有效性与“javascript:；“的关系——a:focus与a:link没有生效的原因

原创已于 2023-02-01 01:43:43 修改 · 196 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2023-02-01 01:28:13 首次发布

博客探讨了a:focus与a:visited样式的有效性和href=\javascript:;\的关系。未点击时，普通链接呈现visited颜色，加了javascript:;或javascript:void(0);的链接呈现linked颜色；点击后，部分链接的:focus样式生效，部分不生效。结论是a链接的:link和:focus未生效，可能是未添加相关属性。

- 以下为a:focus与a:visited样式的有效性与href="javascript:;"的关系：

html, css代码如下：

<body>
    <div class="f">
        <a href="javascript:;">javascript:;</a>
        <a href="">mmmmm</a>
        <a href="">mmmmm</a>
        <a href="javascript:void(0);">javascript:void(0);</a>
        <a href="">mmmmm</a>
        <a href="">mmmmm</a>
    </div>
</body>

    <style>
        a {
            color: black;
            background-color: pink;
        }

        a:link {
            color: orange;
        }

        a:hover {
            color: blue;
        }

        a:active {
            color: yellow;

        }

        a:focus {
            color: lightgreen;
            background-color: aquamarine;
        }


        a:visited {
            color: red;
        }

- 在浏览器中打开，还未点击时，link的生效情况不同。可看到如下结果：