我的导航栏 CSS 覆盖了我在 Opera 上的其他链接 CSS答案

【问题标题】：My Navigation Bar CSS is overwriting my other links CSS on Opera我的导航栏 CSS 覆盖了我在 Opera 上的其他链接 CSS
【发布时间】：2013-04-10 12:28:07
【问题描述】：

我的导航栏样式如下：

nav a:link,a:visited {
    display:block;
    width: 125px;
    color:#000000;
    background-color:#FFFFFF;
    text-decoration:none;
    font-family: Arial,Helvetica,sans-serif;
    font-variant:small-caps;
    padding: 5px;
    font-size: 18px;
}

我的其余链接的样式如下：

footer a:link {
    color:#7A7A7A;
}

footer a:visited {
    color:#7A7A7A;
} 

footer a:hover {
    color:#383838;
}   

footer a:active {
    color:#000000;
}

问题是 Opera 无法识别 a:link,a:visited 之前的 #nav 或 #footer，因此，我页面上的每个链接看起来都像 Opera 中的导航栏。谁能想到解决这个问题？

HTML

<ul id="nav">
    <li>
        <a href="#home">Home</a>
    </li>

    <li>
        <a href="#news">About Us</a>
    </li>

    <li>
        <a href="#contact">Portfolio</a>
    </li>

    <li>
        <a href="#about">Services</a>
    </li>

    <li>
        <a href="#about">Contact Us</a>
    </li>
</ul>

这是被覆盖的 HTML：

<div id="footer">
    Copyright 2013, <a href="http:">Link 1 </a> and <a href="http:">Link 2 </a>
</div>

【问题讨论】：

你能提供任何html吗？
@user2266044 编辑问题中的 html 而不是将其放在评论中。
如何在 Opera 中失败，而在其他浏览器中成功？

标签： css opera

【解决方案1】：

导航链接的第二个选择器不太正确，应该是：

nav a:link,
nav a:visited {
    // styles
}

而不仅仅是nav a:link, a:visited，像这样将样式应用于每个访问的锚点。

也像其他答案中提到的那样，由于您已经发布了 HTML，因此您必须选择带有 #nav 或 #footer 的索引 (id) 元素。

【讨论】：

【解决方案2】：

您正在尝试定位一个 ID，您的 CSS 选择器应该是 #nav 和 #footer

例如

#footer {
  blah
}
#nav {
  blah
}

【讨论】：

【解决方案3】：

正如Simons 回答中提到的，第二个选择器需要添加nav，如nav a:visited 而不是a:visited。

Here is a working example（在 Win7 上的 Opera 12 和 Chrome 26 中测试）

还从 nav 更改为 #nav（页脚相同）以使其与您的 html 一起使用

【讨论】：