【问题标题】:Background top-menu css color背景顶部菜单 css 颜色
【发布时间】:2014-11-28 15:27:40
【问题描述】:

CSS代码:

.sf-menu {
  position: relative;
  padding: 0;
  width: 100%;
  border-bottom: 3px solid #e9e9e9;
  background: #ffffff; 
}

@media (max-width: 767px) {
  .sf-menu {
    display: none;
  }
}

网站:

http://www.sapins-noel.fr/

尝试改变顶部菜单的背景颜色,默认值为#cbccbe; (灰色)我写了#ffffff(白色)但没有任何变化,有人知道吗?

【问题讨论】:

  • 查看我们的代码,背景是不可见的,因为 .sf-menu 没有高度。

标签: css colors


【解决方案1】:
#header .sf-menu

优先,因为它是父级。如果你真的想绕过它 -

.sf-menu {  
    position: relative;
    padding: 0;
    width: 100%;
    border-bottom: 3px solid #e9e9e9;
    background: #ffffff !important;
}

【讨论】:

  • 很高兴听到,记得使用 F12(大多数浏览器)作为开发工具,然后您自己就可以轻松发现这一点! :)
【解决方案2】:

您需要使用更具体的选择器。

背景颜色是这样设置的:

#header .sf-menu {
    background: #cbccbe;
    border-bottom: 3px solid #c1c2b4;
}

您似乎正在尝试使用以下内容更改颜色:

.sf-menu {
    position: relative;
    background: #ffffff;
    padding: 0;
    width: 100%;
    border-bottom: 3px solid #e9e9e9;
}

第一个选择器比你的更具体,所以它会优先。

在您的选择器前面添加#header,特异性得分将相等。只要您的代码在默认值之后,它就会优先并覆盖它。

Further reading

【讨论】:

  • 我比较明白,亲子关系
  • 这与父母/孩子没有任何关系。重要的是选择器的特殊性。阅读我发布的链接