试图覆盖规则

Question

我预计上面的规则会覆盖第二个规则，但是没有..为什么？

body div#wrap_all header#header div#header_main div.container nav.main_menu div.avia-menu ul:first-child > li a {
    height: 50px !important;
}

#header_main .container, .main_menu ul:first-child > li a {
    height: 88px;
}

Answer 1

你应该计算你的CSS规则的特殊性，以便找出为什么一个人接管另一个规则： http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

  

每个ID为100，为每个属性，类或伪类添加10，添加   每个元素名称或伪元素

1

此外，使用!important标志应该绝对确保它比第二个规则更具体：

  

！important声明为样式表作者提供了一种方法   给CSS值比自然更重

我想如果情况仍然如此，那么会有style属性或第三方脚本阻碍。

Answer 2

尝试将第二条规则添加到第一行：

body div#wrap_all header#header div#header_main div.container nav.main_menu div.avia-menu      ul:first-child > li a,
.main_menu ul:first-child > li a{
   height: 50px !important;
}

如果这样做有效，则意味着第一条规则未被应用，否则应该重写。