Question

我有以下用于使一个链接着色的css，但它适用于我拥有的所有链接。有没有办法阻止这一点。

这是我的css应用于链接：

a:visited {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color: #F00;
display: block;
border-radius: 5px;
z-index:10;
}

a:link {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color:#F00;
display: block;
border-radius: 5px;
z-index:10;
}

a:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #CCC;
text-decoration: none;
background-color: #C00;
display: block;
border-radius: 5px;
z-index:10;
}

这是应用于以下内容的链接：

<td><a href="Food.html">Food</a></td>

这是我不希望它应用于的链接：

<td class="footer"><b><a href="Rides.html">Top Attractions</a></b>

Answer 1

您可以按a选择href标记，如下所示：

JSFiddle - DEMO

a[href="Food.html"] {
    color: red;
}

已更新：DEMO （包含您的密码）

Answer 2

工作JSfiddle：demo 我给了你想要为课堂设计风格的链接，给了课堂一种风格。

a.food :visited

而不是：已访问

Answer 3

试试这个

HTML

<td><a href="Food.html" class="colored>Food</a></td>

CSS

 .colored{
color:red;
}

Answer 4

你可以做的一件事就是给标签一个id / class，然后在你的css中引用它。

Answer 5

您可以将类添加到您想要的链接中，并单独设置其样式。

HTML：

<td class="footer"><b><a href="Rides.html" class="rides">Top Attractions</a></b>

CSS：

a.rides {...}

Answer 6

将类应用于要实现的链接：

<a href='food.html' class='apply_to_this'>Food</a>

然后在你的CSS中：

a:link.apply_to_this{
    // your styles
}

Answer 7

您可以将类添加到您不应用此规则的链接，也可以使用此规则：

a:not(.footer):link {...}

Answer 8

不是停止将它应用于一个链接，而是需要使用覆盖要更改的样式的其他CSS添加一个类到该链接，或者（尽管这是不好的做法......）在其上使用内联样式一个链接。

正确的解决方案：

在你的CSS中

.exception {put css here that will override the general link css, using !important to override it ifnecessary}

在你的HTML中

<a href="food.html" class="exception">Content here</a>

快速而肮脏的解决方案

<a href="food.html" style="Your overiding css here">Content</a>

虽然这种方式可行，但对于可访问性问题却不以为然。

Answer 9

你可以创建一个类并将其应用于上面提到的那个链接，或者你可以通过你的选择器告诉CSS将这个链接代码只应用于这些选择器中的链接，就像我在下面发布的那样： / p>

#mainContainer #footer #etc #etc a:link {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color:#F00;
display: block;
border-radius: 5px;
z-index:10;
}

PS - 内联样式是非常糟糕的做法。它增加了大量的额外代码，这将降低你对谷歌，雅虎，MSN等的排名。更不用说它使代码更难以阅读和更笨重。

如何阻止a：链接应用于所有链接

9 个答案: