惱人的css壓倒一切的聲明在代碼中降低了？

似乎css的級聯部分不適用於這種情況。我確信我正在做一些明顯錯誤的事情。如果您使用類/元素選擇器組合（.core-services li），它是否會以某種方式爲將來的行試圖覆蓋它而賦予其霸權？（媒體查詢聲明被「忽略」）。唯一有效的是！重要的，如果可能的話，我想避免它。惱人的css壓倒一切的聲明在代碼中降低了？

HTML：

<section class="core-services"> 
     <div class="site-wrap"> 
      <ul> 
       <li class="green_1"> 
        <i class="fa fa-database"></i> 
        <p>Efficiently unleash cross-media information       without cross-media value.</p> 
       </li> 
       <li class="green_2"> 
        <i class="fa fa-code"></i> 
        <p>Efficiently unleash cross-media information       without cross-media value.</p> 
       </li> 
       <li class="green_3"> 
        <i class="fa fa-rocket"></i> 
        <p>Efficiently unleash cross-media information       without cross-media value.</p> 
       </li> 
       <li class="green_4"> 
        <i class="fa fa-terminal"></i> 
        <p>Efficiently unleash cross-media information       without cross-media value.</p> 
       </li> 
      </ul> 
     </div> 
    </section>

CSS：

.core-services { 
    background-color: #00873B; 
    overflow: hidden; 
} 
.core-services ul { 
    margin: 0; 
    padding: 0; 
} 

.core-services li { 
    display: inline-block; 
    float: left; 
    width: 280px; 
    border-radius: 5px; 
    margin: 0 10px; 
    text-align: center; 
    padding: 35px 45px; 
    background-color: rgba(255,255,255,0.6); 
    box-shadow: 0px 0px 15px rgba(0,0,0,0.4); 
} 

@media screen and (max-width: 1240px) { 
    .green_4 { 
     margin-top: 1.7%; 
    } 
} 

.core-services i { 
    font-size: 80px; 
    color: rgb(57, 55, 57); 
    margin-bottom: 35px; 
}

jsbin：http://jsbin.com/lugacazine/3/edit?html,css,output

來源

2015-02-17 Markus Hallcyon

如何輸出不同於你的預期？ – 2015-02-17 22:32:08

我期望媒體查詢中的代碼能夠運行，但是它被覆蓋 – 2015-02-17 22:33:14

http://specificity.keegan.st使用它來檢查特異性。 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity，並要瞭解有關該主題的更多信息 – Anthony 2015-02-17 22:42:08

.green_4有0010特異性，同時。核心業務裏有0011特異性爲了以增加.green_4的特異性，添加其父母選擇器，如下所示：

@media screen and (max-width: 1240px) { 
    .core-services .green_4 { 
     margin-top: 1.7%; 
    }

}

去這裏閱讀更多關於CSS的特異性： http://www.w3.org/TR/css3-selectors/#specificity

來源

2015-02-17 22:35:09 travismeyer

惱人的css壓倒一切的聲明在代碼中降低了？

回答

相關問題