Question

Chrome正在从.link_block ul li获取CSS填充，即使之后出现li.page_icon并且我已经包含了！重要声明。

我知道有很多不同的方法来应用我想要的填充，但是如果有人可以帮助解释为什么link_block类CSS在这里采用先例，即使page_icon类看起来更具体并且具有！important声明。

HTML：

 <li class="page_icon">Create New Resume</li>

CSS：

.link_block ul li {
color: #000;
text-decoration:none;
padding: 0px 0px 10px 0px;
font-family:Verdana, Geneva, sans-serif;
}

 li.page_icon {
display:block;
width: 100%;
min-height: 60px;
background-image:url(../../images/page_icon.png);
background-position:top left;
background-repeat:no-repeat;
padding: 0px 0px 0px 50px; !important
margin: 0px 0px 0px 0px;
}

Answer 1

应该是这样的：

padding: 0px 0px 0px 50px !important;

Answer 2

首先，重要的是应该在分号之前，像这样：

padding: 0px 0px 0px 50px !important;

其次，你真的不应该在你的CSS中使用重要的东西。您可以通过将较低规则与另一规则相等的特性来解决问题，因此较低规则将是应用的规则。

ul li.page_icon {
    display:block;
    width: 100%;
    min-height: 60px;
    background-image:url(../../images/page_icon.png);
    background-position:top left;
    background-repeat:no-repeat;
    padding: 0px 0px 0px 50px; !important
    margin: 0px 0px 0px 0px;
}

Here's a good link on specificity

CSS优先级问题和！重要

2 个答案: