我可以用CSS来完成这个任务吗？

如果我有这样的元素：

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

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

得到

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

但是有没有一种方法可以获得以下信息

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

也就是说，通过在文本前加上相同的数字，唯一地标识页面上的所有链接

注意：对特定的URL进行硬编码不是一个选项，我可能要处理数百个链接，并且事先不知道URL

---

我意识到使用javascript很容易/可能做到这一点，我只对基于CSS的解决方案感兴趣，或者对CSS不可能做到这一点的原因进行解释。

我认为纯CSS无法实现这种行为，而您需要javascript。总有这样的情况：

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

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

你明白了

---

---

在jQuery中，这是非常简单的，所以我建议您使用它。

您可以使用：contains，但我不确定它的支持程度，因此您最好使用JavaScript

a：包含（“a”）{
/*这里的风格*/
}
a：包含（“B”）{
/*这里的风格*/
}

编辑：

显然：根本不支持contains。我会把这个放在这里，这样就不会有人费心放了

不过，您可以在jQuery中使用：contains并相应地添加一个类

$（'a:contains（a）'）.addClass（'CLASS_NAME'）；

尝试以下代码：

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，它就是这样工作的：

如果使用jQuery是可以的，那么可以通过操作

：在
伪元素的内容之前：

演示：

JS

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

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")]);
}

var标签=[
"1",
"2",
"1",
"3"
//等等。。。
];
//或者为这个序列加入一些算法
$（'a'）。每个（函数（i）{
$（this.attr（'data-label'，labels[i]+'）；
});

CSS

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

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")]);
}

a:before{
内容：attr（数据标签）；
颜色：红色；
文本对齐：左对齐；
右边填充：10px；
字体大小：11px；
显示：内联；
}
好的，我明白你的问题的意思了。仅仅使用简单的CSS是不可能的（至少不能跨平台）

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

我的首选是使用数据属性来保存值，在本例中，我选择了
数据计数器
。如果您这样做，CSS将变得微不足道：

CSS

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

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，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

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

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")]);
}

var linkcounter={}；
var计数器=0；
var archors=document.getElementsByTagName（'a'）；
对于（var i=0；i

您可以在此处查看不带jQUery的版本：

使用jQuery的版本如下：

遗憾的是，目前还没有CSS唯一的方法来实现这一点。我希望这有帮助。
​
 它对我有用。你在什么浏览器上试用过？（你可以在这里看到我的例子：）@ramsesoriginal:问题是这样说的，但这不是预期的结果。请再次阅读问题。如何识别这些链接？你是通过他们的文本还是通过他们的
href
来识别他们的吗？最好是通过URL，但这两种方式都不重要。
：contains（）
根本不受支持（除了一些我认为不再使用的KHTML版本）。我感谢您的帮助，我知道jQuery是一种很好的技术，但我在这里问的是CSS=/没有问题。我不确定这是否可能，所以如果需要，就提供一个替代方案。酷，我只是想让人们建议完全有效的基于javascript的解决方案，以理解为什么我还不接受答案！XD@EliranM：是的，你仍然可以在相同的章节号中找到定义。底部的3个将被解释为相对链接，因为它们没有
http://
前缀。不过，我目前不关心这些情况，谢谢@starbeamrainbowlabs：但这仍然是一个问题，因为它们看起来像链接：）试图设计子Reddit的样式，所以javascript不是一个选项-使用jQuery大多数事情都很简单。。。很抱歉，subreddit是什么？我很感谢您的尝试，但这不是CSS。一、 我也喜欢jQuery。我几乎可以肯定，仅仅使用CSS是不可能解决这个问题的。谢谢！顺便问一下，有没有一种方法可以使用CSS隐藏重复链接？如果我的结果是1。A、 二,。B、 三,。C这总比什么都没有好（不能使用JS。）@Emory：除非链接都包含在同一个父级中，并且您事先知道URL，否则您将无法访问。好吧，我想除了将此标记为已解决并继续操作之外，没有什么可做的了。谢谢@BoltClock@BoltClock搞定了：如果它们在同一个父对象中，并且您事先知道链接，那么您可以使用
：first child
和类似的工具。如果您处于仅限Internet Explorer的环境中，也可以使用
HTML组件
（）。。但我强烈建议不要使用这种丑陋的解决方案。@Eliran M.-你为什么要编辑这个答案？据我所见，您所做的只是删除所有代码行并将它们放回原处！