html - 将 html 链接 anchor 与 css 悬停相结合

Question

为了加深我的 CSS 知识，我一直在尝试这样做，但我什至不确定它是否可行。

我有一个包含 50 个链接的列表，页面下方每行 1 个。每个链接之间的垂直填充/边距非常小。每个链接都分配了一个单独的 HTML id，例如

<a id="test" href="temp.html">blaghblagh</a>

以便访问http://example.com/temp.html#test会将页面焦点更改为特定链接 id。

我想要的是当访问 temp.html#test url 时，#test id 链接 anchor 将通过在链接周围放置填充/边距使链接“脱颖而出” .

我一直在尝试将它与 a:hover 和各种东西结合使用，但无济于事。任何建议将不胜感激。

Answer 1

你需要使用:target伪选择器:

a:target {
    padding-left: 20px;
    color: red;
}

演示:http://jsfiddle.net/dfsq/QuFHp/

The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same. (http://css-tricks.com/on-target/)

IE 从版本 8 开始支持它。如果你需要支持旧的浏览器，你必须使用 javascript:

var hash = location.hash;
if (hash) {
    document.getElementById(hash.replace('#', '')).className = 'active';
}