为什么css规则优先

Question

我有两条适用于html元素的规则，nav和pull-right

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优先为什么？

- 这是chrome developper工具的图片：

Answer 1

根据发布的屏幕截图，pull-right课程在第32行，而nav课程在第38行，这解释了原因{ {1}}会覆盖nav。

如果您放置HTML代码并不重要：

pull-right

或者像这样：

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

由于css中的后续属性会覆盖css中的前一个属性（当然，除非使用 <ul class="top-header__nav pull-right nav nav-inline"> 标记）。