css - Chrome 突然覆盖样式表

Question

不确定我昨晚做了什么，但现在我今天早上起床，chrome 似乎覆盖了我的 anchor 和输入样式。我希望我可以在这里发布一段代码，但我不知道可能是什么代码导致了它。我不想到处都是 !mportant 来修复它，所以我希望有人可以查看 test site并弄清楚 chrome 不喜欢什么。页面顶部的 headerWidgets(电子邮件、电话和搜索)不应该有装饰，并且应该在悬停时改变颜色。我什至不能再将光标放在搜索输入中。导航菜单不应该有装饰，但悬停有效。去搞清楚。 chrome 开发工具向我展示了这个:

a:-webkit-any-link {        user agent stylesheet
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

和一堆用于输入的用户样式表条目

Answer 1

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

是 a 的 webkit 默认样式标签。

添加一个CSS选择器#email a,#phone a并把你想要的样式放在里面。像这样:

#email a,#phone a{
    text-decoration:none;
}

对于悬停:

#email a:hover,#phone a:hover{
    color:red;
}

一个更好的选择器来定位 #headerWidgets 中的所有 anchor 标签

#headerWidgets a {
    color: #F00;
}

#headerWidgets a:hvoer {
    color: #CCC;
}

而您无法再点击搜索框的原因是 div#headerMenuWrapper挡住了去路。在开发工具上将鼠标悬停在这个元素上 <div id="headerMenuWrapper" class="clearfix">你会看到它覆盖了#headerWidgets