css - 试图覆盖规则

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/

100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element

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

An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has

我想如果情况仍然不是这样，会有一个 style 属性或第三方脚本阻碍。