html - 为什么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，但是 nav margin:0 优先，为什么??

-- 这是一张 chrome 开发者工具的图片:

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 标签)。