当您单击链接时，将应用所单击链接的 a:active 样式。因此，当我有一个链接使用其名称从 url 调用和激活时，如下所示，为什么我的代码不起作用？
.box{
display:block;
width:100px;
height:100px;
background:gray;
margin:20px 0px;
}
a{
-moz-transition:all 1s ease;
-webkit-transition:all 1s ease;
}
a:active{
background:orange;
}
<body>
<a href="#user">user</a>
<a class="box" name="user">userbox</a>
</body>
当从 url 调用用户框时，我希望它为用户框调用 a:active css。 我的代码是否无效或不适用于此类情况？
最佳答案
我想你想要的伪类是:focus。 :active 在点击链接时应用。
-编辑-
在我测试的浏览器中，只有 Internet Explorer 11 在更新 URL 以包含#user 时聚焦 anchor 。您可以使用 JavaScript 来设置一个类，如下所示:
window.addEventListener('hashchange', function () {
var activeElement = document.getElementById(window.location.hash.substring(1));
if (activeElement) {
activeElement.className = 'active';
}
});
这需要使用以下 CSS:
.active {
color: orange;
}
这假设使用 id="user" 而不是 name="user" 两者在 URL 哈希方面的行为相同。
关于html - 设置一个 :active style to links which have a name value?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21774722/