Can I accomplish this with CSS?

If I've got elements like this:

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

I know I can use something like

body
{
    counter-reset:section;
}

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

to get

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

but is there a way to get the following?

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

ie. uniquely identify all links on a page by prefixing the text with the same number.

Note: hardcoding specific URLs isn't an option, I'm potentially dealing with hundreds of links and don't know the URLs ahead of time.

I realize this would be easy/possible with javascript, I am only interested in CSS-based solutions or an explanation of why this isn't possible with CSS.

---

Ok, I got what you mean with your question. Just with plain CSS it's not possible (at least not cross-platform..)

If you can use javascript, you have several possibilities.

My preference would be to use a data-attribute to hold the value, for this example I chose data-counter . If you do like this, the CSS becomes trivial:

CSS

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

And the Javascript would look like this if you have jQuery:

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

​ or like this without jQuery:

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

You can view the version without jQUery here: http://jsfiddle.net/ramsesoriginal/CVW7Y/5

And the version with jQuery here: http://jsfiddle.net/ramsesoriginal/CVW7Y/4

Sadly there is no CSS only way to do this (yet). I hope this helps. ​

---

I don't think you can get this behaviour with pure CSS, and you need Javascript. And there are always cases like this:

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

You get the point.

---

In jQuery this is quite trivial, so I'd suggest you use that.

---

If using jQuery is OK, this can be done by manipulating the :before pseudo element's content:

Demo: 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;
}

链接地址: http://www.djcxy.com/p/10974.html

上一篇: 我如何在PHP CLI中调试分段错误？

下一篇: 我可以用CSS来完成这个吗？