css - 我可以用 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 是不可能的(至少不能跨平台..)

如果您可以使用 javascript，那么您有多种可能性。

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

CSS

a:before
{
   content:attr(data-counter)". ";
}​

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

JS 与 jQuery

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

或者在没有 jQuery 的情况下像这样:

普通 JS

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

你可以在这里查看没有jQUery的版本:http://jsfiddle.net/ramsesoriginal/CVW7Y/5

这里是 jQuery 版本:http://jsfiddle.net/ramsesoriginal/CVW7Y/4

遗憾的是(目前)还没有唯一的 CSS 方法来做到这一点。我希望这有帮助。