爲什麼CSS規則採取precendence

我有2條規則，我申請到HTML元素，nav和pull-right爲什麼CSS規則採取precendence

HTML

<ul class="top-header__nav nav nav-inline pull-right"> 
       <li><a href="#">Acceussil</a></li> 
       <li><a href="#">Acsssceuil</a></li> 
       <li><a href="#">Accessuil</a></li> 
       <li><a href="#">Accesssuil</a></li> 
       <li><a href="#">Accesssuil</a></li> 
</ul>

CSS

.nav { 
    margin: 0; 
    padding: 0; 
} 

.pull-right { 
    margin-left: auto; 
}

正常， ul應該有margin右到auto，但導航margin:0爲什麼優先？

- 這裏是鉻developper工具的圖像：

來源

2016-05-15 karim

在上面的例子中，'pull-right'會覆蓋默認邊距以及'nav'的邊距。你對什麼感到困惑？ –

確切的，但它不，top-header__nav有裕度設置爲0 – karim

不太確定你的意思。如果你在談論'nav'的邊距，那麼來自nav的'margin：0;'只適用於'margin-right'，'margin-top'和'margin-bottom'，而'margin-left'被「拉右」屬性覆蓋。 –

根據貼截圖中，pull-right類是線32而nav類是線38其解釋了爲什麼nav覆蓋pull-right。

<ul class="top-header__nav nav nav-inline pull-right">

或者這樣：

<ul class="top-header__nav pull-right nav nav-inline">

在你的CSS隨後的財產在你的CSS將覆蓋前面的屬性

如果您將HTML代碼這樣沒關係（除非!important標籤當然使用）。

來源

2016-05-15 20:23:21

爲什麼CSS規則採取precendence

回答

相關問題