1

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

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

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

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

我想要的是当访问 temp.html#test url 时，#testid 链接锚将通过在链接周围放置填充/边距使链接“突出”。

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

4

6 回答 6

4

您需要使用:target伪选择器：

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

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

当 URL 中的哈希值和元素的 id 相同时，CSS 中的 :target 伪选择器匹配。( http://css-tricks.com/on-target/ )

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

var hash = location.hash;
if (hash) {
    document.getElementById(hash.replace('#', '')).className = 'active';
}
于 2013-03-28T11:28:27.140 回答
1

有一个特定于锚标签的:visited选择器：

a:visited {
    padding:10px; /* Whichever values you wish to use. */
    margin:10px;
}
于 2013-03-28T11:22:54.307 回答
0

您正在寻找的选择器是:visited：

a:visited {
    padding: 5px;
    margin: 5px;
    /* or whatever you want, really */
}
于 2013-03-28T11:23:12.617 回答
0

这不能用纯 CSS 完成，但可以用Javascript/jQuery 实现。

无耻的插件，但我写了一篇关于如何实现这一点的文章，你可能会发现它很有用。

http://curtisimson.co.uk/js/reading-url-hashtag-values/

if (window.location.hash){
      var hash = window.location.hash.substring(1); //gets id in URL
      $("#" + hash).css("padding", "10px"); //applies padding to that element
}
于 2013-03-28T11:23:58.963 回答
0

尝试。a:visited{ color: red; }

了解有关Pseudo-Classes 小文档的更多信息

于 2013-03-28T11:24:53.450 回答
-1

我不认为你可以用 CSS 正常地做到这一点。您必须添加一个 jQuery 函数，该函数检查是否有一个 ID 附加到 URL，如果有，则向该链接添加一个类。

你在哪里错了：悬停？发布一些代码，我将更新我的答案以使其正常工作。

于 2013-03-28T11:22:41.993 回答