CSSの優先度と重要な問題

Question

後でli.page_iconが表示されてもChromeはCSSの埋め込みを.link_block ul liから取りますが、重要な宣言が含まれています。

私は、必要なパディングを適用する方法がたくさんあると知っていますが、誰かがなぜ、link_blockクラスのCSSがここで先行しているのか説明するのを助けることができます。

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; 

第2に、あなたは本当にあなたの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

Answer 2

：！

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