Question

也许是一个简单的问题。我想保留一个style.css来将我的格式设置为一个网站。我想要一些链接（不是所有链接！）表现不同，因为这些链接不应加下划线。他们还需要不同的字体设置（更大和不同的颜色）此代码在HTML内部工作，以删除链接下划线：

<a style=" text-decoration:none;" href="News.html">

我想使用像

这样的东西

<a class="nounderline" href="news.html">

然后将我的设置放入其中，但我不确定如何在中央style.css文件中编写它我不知道如何处理胡佛和访问的颜色，不知道如何写下来，有人可以解释如何编写这样的CSS，以便它不会影响所有的超链接？

Answer 1

你可以这样构建你的css：

a { color: #0f0; }

a.special { 
    text-decoration: none; 
    color: #00f; 
}

a:hover {
    color: #0ff;
}

a.special:hover {
    text-decoration: underline;
    color: #ff0;
}

在HTML中，您按原样声明所有普通锚点。但是，请为要特别对待的锚点提供课程special。

Answer 2

您可以为要创建的两种类型的链接分配不同的类，并使CSS与两个类的处理方式不同。对于第二个示例，您可以使用以下方法设置类nounderline的链接的样式：

a.nounderline {
  ... style ... 
}

要设置给定班级的样式（例如上面说nounderline），您可以执行以下操作：

a.nounderline:hover {
  ... style when hovered ... 
}

Answer 3

您可能需要查看w3 article on selectors。

一个类有助于识别（选择）CSS中的元素，然后可以将这些元素构建到选择器中，从而增加特异性，例如。

a{
 /*would target all links */
}
.nounderline{
 /*would target anything with the nounderline class */
}
a.nounderline{
 /*would only target links with the nounderline class */
}

一旦构建了选择器，就可以使用伪选择器来定位特定的操作，例如： :active，:hover

a.nounderline:hover{
 /*would only target links with the nounderline class which are hovered over */
}
a.nounderline:visited{
 /*would only target links with the nounderline class which have been visited */
}

Answer 4

您只需在链接中添加类。

例如在HTML中：

<a class="nounderline" href="#link">Link</a>

在CSS中：

.nounderline{ text-decoration:none; }

因此，您提供“nounderline”的每个标签都不会带下划线的文字。

Answer 5

你仍然可以使用这样的伪类：

a:link    {color: blue}
a:visited    {color: purple}
a:active    {color: red}

即使使用.nounderline

a.nounderline:link    {color: blue}
a.nounderline:visited    {color: purple}
a.nounderline:active    {color: red}

如何在单个页面上获得基于css的不同链接

5 个答案: