tl; dr：执行此操作：

Question

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

Answer 1

将shiv添加到你的脑袋

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

在this fiddle

中相应地向ul添加id并设置样式

<ul id="firstNav">

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

Answer 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; dr：执行此操作：

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

Chrome中的css样式存在冲突

2 个答案:

tl; dr：执行此操作：