为什么css规则优先考虑

Question

我有2个规则,我适用于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行,这解释了为什么nav覆盖pull-right.

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

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

或者像这样:

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

因为你的css中的后续属性会覆盖你的css中的前一个属性(除非!important当然使用标签).