Question

这是仅限Chrome的问题。虽然我只在IE10和Chrome上测试。在IE中，链接显示正常。这仅适用于VISITED链接。我从未访问过的链接显示蓝色正常。

#menu a:link,a:visited
{
display:inline-block;
text-transform:lowercase;
width:auto;
padding-left:25px;
padding-right:25px;
padding-top:6px;
padding-bottom:6px;
margin-left:4px;
margin-right:4px;
text-decoration:none;
color:#ffffff;
text-align:center;
background-color:#777777;
}

此HTML代码段是代码中唯一引用＆＃34; menu＆＃34;的部分。我也试过调试，发现它特别是＆＃34; a：visited＆＃34;覆盖我页面上所有链接并将其变为白色的部分。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainstyle.css">
<title>Blah</title></head>
<body>
<ul><li style="display:inline-block;list-style-type:none;"><img src="logo.png" /></li><li style="display:inline-

block;list-style-type:none;"><div id="header">
<div id="menu">
      <div><img src="headline.png" /></div><ul>
        <li><a href="#">Home</a></li><li><a href="#">Contact</a></li><li><a href="#">Products</a></li><li><a 

href="#">Design-a-Tee</a></li><li><a href="#">Reviews/Testimonials</a></li>
      </ul>
</div>
</div>
</li></ul>

Answer 1

逗号（,）是一个选择器分隔符，用于定义选择器列表。所以如果你有：

#menu a:link,a:visited
{
  /* whatever */
}

与拥有：

相同

#menu a:link
{
  /* whatever */
}
a:visited
{
  /* whatever */
}

因此#menu部分仅适用于第一个选择器。认为好像逗号重置上下文。

因此，如果您想在a下设置#menu个标记，请在每个选择器中使用

#menu a:link,#menu a:visited { /* ... */

对于考虑所有链接菜单为 :visited 的浏览器，请注意，它们都指向本地锚点：<a href="#">，因此这些锚点属于当前页面，因此他们被“访问”。

从href更改一个#，您会看到它们不被视为:visited： verify it in a demo 。

为什么这个id会覆盖整个页面的链接？

1 个答案: