CSS優先和！重要問題

儘管之後出現li.page_icon並且我已經包含！important重要聲明，但Chrome仍在使用.link_block ul li的CSS填充。CSS優先和！重要問題

我知道有很多不同的方法來應用我想要的填充，但是如果有人能夠幫助解釋爲什麼link_block類CSS在這裏是先例，即使page_icon類似乎更具體並且具有！重要聲明。

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; 
}

來源

2012-02-15 jsuissa

訴諸之前，您應該指定一個更具體的CSS選擇！重要的。 – 2012-02-15 19:54:09

首先，重要的應該是分號之前，像這樣：

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

來源

2012-02-15 20:00:06 derekaug

謝謝！這正是我想知道的。所以只需在課堂前加上ul，就可以達到同樣的效果。像魅力一樣工作，不需要重要的聲明。 – jsuissa 2012-02-15 20:03:21

應該是這樣的：

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

來源

2012-02-15 19:51:16

非常感謝 - 我認爲我做了一件很簡單的事。在特殊性方面，我仍然會認爲page_icon類會優先考慮？ – jsuissa 2012-02-15 19:53:43

CSS優先和！重要問題

回答

相關問題