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链接锚将通过在链接周围放置填充/边距来使链接“脱颖而出”。

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

Answer 1

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

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

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

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

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

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

Answer 2

锚点标签有一个:visited selector：

a:visited {
    padding:10px; /* Whichever values you wish to use. */
    margin:10px;
}

Answer 3

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

a:visited {
    padding: 5px;
    margin: 5px;
    /* or whatever you want, really */
}

Answer 4

使用纯CSS无法做到这一点，但使用Javascript / jQuery可以实现。

无耻的插件，但是wrote an article关于如何实现这一点你可能会觉得有用。

http://curtistimson.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
}

Answer 5

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

详细了解Pseudo-Classes small documentation

Answer 6

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

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

将html链接锚点与css悬停相结合

6 个答案: