CSS 类链接答案

【问题标题】：CSS Class LinksCSS 类链接
【发布时间】：2013-01-13 04:50:00
【问题描述】：

我正在一个网站上工作，我想为不同的链接集制作不同的样式。我已经阅读了教程，但我仍然无法让我的代码正常工作。所以这里是代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
a.test: link {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #C00;
}
a.test: hover {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #6F0;
 }
a.test: active {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #90F;
}
a.test: visited {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #FF0;
}

</style>
</head>

<body>
Emily

<p>sdlkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjlsdkf
sdlkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjlsdkf
sdlkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjlsdkf
sdlkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjlsdkf
<p><span class="test"><a href="http://www.ehow.com/how_2080242_style-link-css.html">rose</a> 

  <a href="http://www.ehow.com/how_2080242_style-link-css.html" class="test"> daisy</a> 

  <a href="http://www.ehow.com/how_2080242_style-link-css.html" class="test">tulip</a> 

  <a href="http://www.ehow.com/how_2080242_style-link-css.html" class="test"> cactus</a>     </span>
<p>ldkfjsldkfjlsdkfsdlkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjs    ldkfjsldkfjlsdkfsdlkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsldkfjsld



</body>
</html>

根据我的阅读，我知道我需要将一个类合并到这样的链接样式中：a.test:link

要将样式合并到链接中，您可以给它一个这样的类，
仙人掌

我不知道为什么这不起作用。

感谢您的帮助！

【问题讨论】：

你已经给<a>一个类，直接使用吧，.test{ }
上面写着仙人掌的地方，我的意思是指其中一个链接，( ehow.com/how_2080242_style-link-css.html" class="test">) cactus()
@ali bassam 我在哪里可以直接使用它？请问有上下文吗？
只需从a.test 中删除a 以使其成为.test，因为您将此类赋予元素，因此您不必在CSS 中使用它：如果您有<div class="hello"></div> ，然后在 CSS 中使用：.hello { color:red; }

标签： css class hyperlink

【解决方案1】：

尽量省略规则中的空格：

a.test:link {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #C00;
}
a.test:hover {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #6F0;
 }
a.test:active {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #90F;
}
a.test:visited {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #FF0;
}

我不希望这个伪类在它们的名字中允许有空格。

顺便说一句，您可以将 CSS 简化为：

a.test {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
}
a.test:link {
    color: #C00;
}
a.test:hover {
    color: #6F0;
 }
a.test:active {
    color: #90F;
}
a.test:visited {
    color: #FF0;
}

【讨论】：