CSS Style a specific link

问题

Scenario: I am in the process of creating a website for the company I work for. I need to follow their visual style guide so I'm creating a CSS file for the website.

Question: All the "more" links need to be in 11pt font while the body is in 12pt. Is there a way to specify that if the link is "more" that it will be styled in 11pt?

Edit: Is there anyway to do this without using a class? Based off the text instead?

Summary: I need to style specific links but I would not like to use classes to style them, maybe text instead?

回答1:

HTML

<a href="whatever.html" class="more">More</a>

CSS

body {
    font-size: 12px;
}

a.more {
    font-size: 11px;
}

回答2:

"Can you give those links CSS classes?"

So, you could use something like:

<a class="more-link" href="http://clownlovers.com">MORE</a>

And thus you could style those with CSS along the lines of:

a.more-link {
    font-size:11px;
}

If you can't do that, then I think you could write a little javascript program to go through and change any such links to the font you want. That's kind of minimal to implement, but I think that's an ugly hack, particularly since on slower machines, you may even initially see the default font appear until js runs and shifts things.

回答3:

specify a class for more link. for eg...

<a href="#" class="link">more</a>

In CSS:

Use..

body
{
 font-weight:13pt;
}
a.link
{
font-weight:11pt;
}

回答4:

There isn't a way for CSS to sift through content like that, but could use jQuery to find all anchors that have the word "more" in it and change it based on that:

$("a:contains('more')").css("font-size", "11pt");

Not a CSS solution, but this is pretty much the only way you could do what you are asking for. Example for you here.

来源：https://stackoverflow.com/questions/6428783/css-style-a-specific-link

标签

html

css

text

hyperlink