CSS Style一个特定的链接

Question

场景：我正在为我工​​作的公司创建网站。我需要遵循他们的视觉风格指南，所以我正在为网站创建一个CSS文件。

问题：所有“更多”链接需要是11pt字体，而正文是12pt。有没有办法指定如果链接是“更多”它将在11pt中设置样式？

编辑：无论如何不使用课程吗？基于文本而不是？

摘要：我需要设置特定链接的样式，但我不想使用类来设置它们的样式，也许是文本？

Answer 1

HTML

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

CSS

body {
    font-size: 12px;
}

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

Answer 2

你能给那些链接CSS类吗？

所以，你可以使用类似的东西：

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

因此你可以使用CSS来设置那些：

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

如果你不能这样做，那么我认为你可以写一个小的javascript程序来完成并将任何这样的链接更改为你想要的字体。这是一个很小的实现，但我认为这是一个丑陋的黑客，特别是因为在较慢的机器上，你甚至可能最初看到默认字体出现，直到js运行和转移。

Answer 3

为更多链接指定一个类。 例如......

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

在CSS中：

使用..

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

Answer 4

CSS没有办法筛选这样的内容，但可以使用jQuery查找其中包含“more”一词的所有锚点，并根据它进行更改：

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

不是CSS解决方案，但这几乎是您可以做的事情。 Example for you here

Answer 5

如果链接是在现有声明中定义的（可能就是这种情况），您必须使用 important 关键字强制执行每条规则。

HTML

<a href="link.html">Normal link</a>

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

CSS

a:link {
   font-weight:12pt;
}

a.more:link, a.more:hover, a.more:visited {
   font-weight:11pt !important;
}