我可以用CSS完成这个吗？

Question

如果我有这样的元素:

<a href="something">A</a>
<a href="something_else">B</a>
<a href="something">A</a>
<a href="...">C</a>

我知道我可以用类似的东西

body
{
    counter-reset:section;
}

a:before
{
    counter-increment:section;
    content:counter(section)". ";
}

要得到

1. A
2. B
3. A
4. C

但有没有办法得到以下？

1. A
2. B
1. A
3. C

即.通过在文本前面加上相同的数字来唯一标识页面上的所有链接.

注意:硬编码特定URL不是一种选择,我可能会处理数百个链接,并且不会提前知道URL.

我意识到这对于javascript来说很容易/可能,我只对基于CSS的解决方案感兴趣或解释为什么CSS无法实现这一点.

Answer 1

好的，我明白你的问题的意思了。仅使用纯 CSS 是不可能的（至少不能跨平台......）

\n\n

如果您会使用 javascript，您就有多种可能性。

\n\n

我的偏好是使用数据属性来保存值，在这个例子中我选择了data-counter。如果你这样做，CSS 就变得微不足道了：

\n\n

CSS

\n\n

a:before\n{\n   content:attr(data-counter)". ";\n}\xe2\x80\x8b\n

\n\n

如果你有 jQuery，Javascript 看起来会像这样：

\n\n

JS 与 jQuery

\n\n

var linkcounter = {};\nvar counter = 0;\n$("a").each(function() {\n    if (!linkcounter.hasOwnProperty($(this).attr("href"))) {\n        counter++;\n        linkcounter[$(this).attr("href")] = counter;\n    }\n    $(this).attr("data-counter", linkcounter[$(this).attr("href")]);\n});\n

\n\n

\xe2\x80\x8b\n 没有 jQuery 时也不会像这样：

\n\n

普通 JS

\n\n

var linkcounter = {};\nvar counter = 0;\nvar anchors = document.getElementsByTagName(\'a\');\nfor(var i = 0; i < anchors.length; i++) {\n    if (!linkcounter.hasOwnProperty(anchors[i].getAttribute("href"))) {\n        counter++;\n        linkcounter[anchors[i].getAttribute("href")] = counter;\n    }\n    anchors[i].setAttribute("data-counter", linkcounter[anchors[i].getAttribute("href")]);\n}\n

\n\n

您可以在此处查看不带 jQUery 的版本：http://jsfiddle.net/ramsesoriginal/CVW7Y/5

\n\n

这里有 jQuery 的版本： http ://jsfiddle.net/ramsesoriginal/CVW7Y/4

\n\n

遗憾的是，还没有 CSS 唯一的方法可以做到这一点。我希望这有帮助。\n\xe2\x80\x8b

\n