我可以用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感兴趣。

- Emory

---

它对我有效。你用什么浏览器试过了吗？（你可以在这里看到我的示例：http://jsfiddle.net/ramsesoriginal/CVW7Y/） - ramsesoriginal

@ramsesoriginal：这是问题所说的，但这不是预期的结果。请再次阅读问题。 - BoltClock

你如何识别这些链接？你是通过它们的文本还是href来识别它们的？ - BoltClock

最好按照URL进行，但无论如何都不应该有影响。 - Emory

Answer 1

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

如果你可以使用JavaScript，那就有几种可能性。

我的首选是使用一个data属性来保存值，对于这个例子，我选择了data-counter。如果你这样做，CSS变得简单：

CSS

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

如果您使用jQuery，下面是相应的Javascript代码：

使用jQuery的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 的方法来实现这一点。希望这对您有所帮助。

- ramsesoriginal

---

谢谢！顺便问一下，有没有用CSS隐藏重复链接的方法？ 如果我的结果是1. A，2. B，3. C，那就比什么都没有好（不能使用JS）。 - Emory

@Emory：除非所有链接都包含在同一个父级中并且您事先知道URL，否则您将无法实现。 - BoltClock

好的，那么我想现在只剩下将其标记为已解决并继续前进了。感谢 @BoltClock！ - Emory

@BoltClock说得对：如果它们在同一个父元素中，并且您事先知道链接，您可以使用:first-child和类似的方法进行操作。您还可以使用HTML组件(http://msdn.microsoft.com/en-us/library/ms531018.aspx)，如果您处于仅限Internet Explorer的环境中...但我强烈建议远离这样丑陋的解决方案。 - ramsesoriginal

Answer 2

我认为你无法仅使用纯CSS实现此行为，需要使用JavaScript。而且总会出现像这样的情况：

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

你懂的。

---

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

- orlp

---

下面的三个链接没有"http://"前缀，将被视为相对链接。 - starbeamrainbowlabs

目前我不关心那些情况，但还是谢谢！ - Emory

@starbeamrainbowlabs：但这仍然是一个问题，因为它们看起来像链接 :) - orlp

对不起，什么是 subreddit？ - orlp

没问题 - subreddit 是 reddit.com 上的子论坛，可以使用自定义样式表。 - Emory

Answer 3

你可以使用:contains，但我不确定它的支持程度，所以最好还是用JavaScript。

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

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

编辑：

显然，:contains 根本不被支持。但我还是会把这个留在这里，以免其他人浪费时间。

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

$('a:contains(A)').addClass('CLASS_NAME');

- SpaceBeers

---

:contains()在任何情况下都不受支持（除了一些已经不再使用的KHTML构建）。 - BoltClock

我感谢你的帮助，我知道jQuery是一个很好的技术，但是我在这里询问的是CSS =/ - Emory

@Eliran M. - 你为什么编辑了这个答案？据我所见，你所做的只是删除所有代码行并将它们放回！ - techfoobar

@techfoobar - 刚刚添加了Google高亮代码注释（请参见编辑说明）- 即使是一行代码，我也有一个恶习，喜欢将其突出显示 :) - Eliran Malka

@Eliran M.：是的，你仍然可以在这里找到定义（http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#content-selectors）-在相同的章节编号中，（奇怪的是）（http://stackoverflow.com/questions/4781141/why-doesnt-the-selector-h3nth-child1containsa-work/4781167#comment-5294495）。 - BoltClock

Answer 4

如果使用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;
}

- techfoobar

---

@Eliran M. - 你为什么编辑了这个答案？据我所见，你所做的只是删除所有代码行并将它们放回！ - techfoobar

Answer 5

尝试这段代码：

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/

- Pavel Reznikov

---

我很感激你的尝试，但那不是CSS。我也喜欢jQuery。 - Emory

我几乎可以确定仅使用CSS解决问题是不可能的。 - Pavel Reznikov