为什么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

回答

相关问题