【问题标题】：Conflicting css styles in ChromeChrome 中的 CSS 样式冲突
【发布时间】：2014-05-08 15:40:56
【问题描述】：

显示我的 CSS 样式时 Chrome 出现问题：水平导航应该有背景灰色和文本颜色为黑色，但在 Chrome 上为栗色，文本为白色。在 IE 9 上工作正常，但在 Chrome 上不行。第二个导航的样式看起来不错。如何解决这些冲突的样式。这是我的代码笔： http://cdpn.io/uCgyF

【问题讨论】：

您使用的十六进制代码 (#800000) 是栗色？它可以在 Chrome 中正确显示，因为 aside 是 Chrome 可以理解的 HTML5 实体，但 IE9 不能。
我希望将这个 css 规则应用于第一个导航：nav#navigation a:link,a:visited{ color: black;背景颜色：灰色；显示：块； }

标签： css

【解决方案1】：

把刀加到你的头上

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

将 id 添加到 ul 并相应地设置样式，如 this fiddle

<ul id="firstNav">

  nav #firstNav  a:link,a:visited{
    color: black;
    background-color:grey;
    display: block;
  }

【讨论】：

我想要实现的是在我的第一次导航中将背景设置为灰色，将文本颜色设置为黑色。第二种样式导航必须保持不变（并且很好）。IE上没有问题。我在 Chrome 中遇到问题，因为它显示背景栗色和白色文本，我不希望这样。
问题在于我想应用提到的css规则的水平导航。
aside a:link 在第 101 行将背景设置为栗色，将文本颜色设置为白色
有没有办法在不使用 !important 规则的情况下将水平导航的背景设置为灰色并将颜色设置为黑色？因为我知道，aside 将背景设置为栗色，将文本颜色设置为白色。
是的，谢谢您的解决方案！你能说出我做错了什么吗？

【解决方案2】：

（跳到底部看 tl;dr）

当我第一次装上你的笔时，我看到的东西是正确的。但后来我点击了一个标题链接，看到了你描述的行为。这告诉我们:visited 选择器可能是问题所在。看看你的 css 代码（我删除了一些以帮助说明这一点）：

nav#navigation a:link, a:visited {
    background-color:grey;
    color: black;
}
aside a:link, a:visited {
    background-color: maroon;
    color: white;
}

逗号 (,) 并不像您认为的那样。 css 中的逗号是两次写相同定义的简写，所以如果我们没有那个简写，你的 css 应该是这样的：

nav#navigation a:link {
    background-color:grey;
    color: black;
}
a:visited { /* <-- oops! */
    background-color:grey;
    color: black;
}
aside a:link {
    background-color: maroon;
    color: white;
}  
a:visited { /* <-- oops! */
    background-color: maroon;
    color: white;
}

使用您的 CSS，整个网站上的每个访问链接（无论是否在您的导航中）都将在栗色上显示为白色。

作为一般经验法则，在 css 中的每个逗号后添加一个换行符。它将帮助您更轻松地查看这些错误。

tl;博士：这样做：

nav#navigation a:link,
nav#navigation a:visited {
    background-color:grey;
    color: black;
}
aside a:link,
aside a:visited {
    background-color: maroon;
    color: white;
}

【讨论】：