CSS样式特定链接答案

【问题标题】：CSS Style a specific linkCSS样式特定链接
【发布时间】：2011-06-21 16:30:54
【问题描述】：

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

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

编辑：在不使用类的情况下有没有办法做到这一点？而是基于文本？

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

【问题讨论】：

你不能只给这些链接一个不同的类吗？
@Tom Walters，不必给他们单独上课，还有其他方法吗？我的意思是链接说“更多”（文本部分），它可以指向任何网页。
@Gage，该类与 href （它指向的位置）无关。在现代网络创建中，我们使用类来区分相似的事物。如果您还为页面制作 html，则向需要样式的锚添加一个类并不难。
@Nick Radford，K 感谢您的意见。使用 css 相当新，并且不确定通常是如何完成的。我将把这个类添加到每个更多的链接中。
@Gage，我通常不喜欢向人们推荐它，但请查看w3schools.com/css 这是一组/好吧/的信息，也很容易理解。

【解决方案1】：

HTML

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

CSS

body {
    font-size: 12px;
}

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

【讨论】：

【解决方案2】：

“你能给那些链接提供 CSS 类吗？”

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

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

因此，您可以使用 CSS 为它们设置样式：

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

如果你不能这样做，那么我认为你可以编写一个小 javascript 程序来查看并将任何此类链接更改为你想要的字体。这有点难以实现，但我认为这是一个丑陋的 hack，特别是因为在速度较慢的机器上，您甚至可能最初会看到默认字体出现，直到 js 运行并转移内容。

【讨论】：

【解决方案3】：

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

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

在 CSS 中：

使用..

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

【讨论】：

【解决方案4】：

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

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

不是 CSS 解决方案，但这几乎是您可以按照您的要求做的唯一方法。 Example for you here.

【讨论】：

【解决方案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;
}

【讨论】：