7

如果我有这样的元素：

<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

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

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

我意识到这对 javascript 来说很容易/可能，我只对基于 CSS 的解决方案感兴趣，或者解释为什么 CSS 不可能做到这一点。

4

5 回答 5

2

我不认为你可以用纯 CSS 来获得这种行为，你需要 Javascript。而且总是有这样的情况：

http://google.com/
http://google.com
google.com
google.com/
www.google.com

你明白了。

在 jQuery 中，这很简单，所以我建议你使用它。

于 2012-07-17T08:40:46.510 回答
2

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

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

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

CSS

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

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

带有 jQ​​uery 的 JS

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 唯一的方法来做到这一点（目前）。我希望这有帮助。​</p>

于 2012-07-17T09:10:48.097 回答
0

您可以使用 :contains 但我不确定它的支持程度，因此使用 JavaScript 可能会更好。

a:contains("A") {
    /* Styles here */
}

a:contains("B") {
    /* Styles here */
}

编辑：

显然 :contains 根本不支持。我会把它留在这里，所以没有人会费心把它放在这里。

您可以在 jQuery 中使用 :contains 并相应地添加一个类。

$('a:contains(A)').addClass('CLASS_NAME');
于 2012-07-17T08:44:21.177 回答
0

如果使用 jQuery 是可以的，这可以通过操作:before伪元素的内容来完成：

演示：http: //jsfiddle.net/rwMWx/2/

JS

var labels = [
    "1",
    "2",
    "1",
    "3"
    // and so on...    
];

// OR maybe put in some algo for this sequence

$('a').each(function(i) {
    $(this).attr('data-label', labels[i] + '. ');
});

CSS

a:before {
    content: attr(data-label);
    color: red;
    text-align: left;
    padding-right: 10px;
    font-size: 11px;
    display: inline;
}
于 2012-07-17T08:59:24.217 回答
-1

试试这个代码：

var counter = 0, cache = {};
$('a').each(function (i, a) {
    a = $(a);
    var href = a.attr('href');
    var c = cache[href];
    if (!c) {
        counter++;
        c = counter;
        cache[href] = c;
    }
    a.text(c + '. ' + a.text());
});
​

我正在使用 jQuery，这就是它的工作原理：http: //jsfiddle.net/pDLbQ/

于 2012-07-17T08:57:43.157 回答