0

我似乎无法弄清楚如何让这个 css 脚本只选择标题的 4 个链接。它使我网页上的所有链接都变成绿色。我该怎么做呢？我试过了1.ul{ css here}，1.a:link,1.a:visited; etc. And then on我添加了class='1'`，但它仍然使所有链接都与标题链接相同。

<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a.a:link,a.a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a.a:hover,a:active
{
background-color:#7A991A;
}

</style>
</head>

<body>
<ul class"a">
<li><a class='a' href="#home">Home</a></li>
<li><a class='a' href="#news">News</a></li>
<li><a class='a' href="#contact">Contact</a></li>
<li><a class='a' href="#about">About</a></li>
</ul>
4

2 回答 2

3

我不确定它是否仍然如此，但每当我尝试在课程中使用数字时，除非先有一个字母，否则它永远不会起作用。无论哪种方式，数字都不是很语义化。在创建 id 和 class 属性时，您应该尝试描述元素包含的内容。

我会这样做：

<ul id="main-menu">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

然后像这样设置CSS：

#main-menu a { color: green; }

正如 Mattias 指出的那样，#main-menu每次定位到#main-menu列表中的锚点时都需要指定。

#main-menu a:link, 
#main-menu a:visited {
    color: green;
}

这相当于：

#main-menu a:link { color: green; }
#main-menu a:visited { color: green; }
于 2013-01-20T11:24:35.067 回答
0

我改变了你的CSS如下：

<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:red; 
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:blue; 
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

a:hover
{
background-color:#7A991A;
}

a:active
{
background-color:purple;  
}
</style>

它似乎工作。

基本上，我将不同链接状态的规则分开，因此您可以为每个状态使用不同的颜色。查看此页面右侧窗格中的规则： W3Schools

告诉我是否有帮助

于 2013-01-20T11:37:39.983 回答