css - 似乎无法覆盖 CSS 属性（margin-right）？

Question

我有一个非常基本的 HTML 列表，如下所示：

<div id="navmenu">
    <ul>
    <li>photography</li>
    <li>&#149</li>
    <li>people</li>
    <li>places</li>
    <li>things</li>
    <li id="lastElement">about</li>
    </ul>
</div>

我的 CSS 格式如下所示：

div#navmenu li {
     display: inline;
     margin-right: 40px;
}

但是，我希望最后一个 li 元素的 margin-right 为 0px。所以我做了：

li#lastElement {
     margin-right: 0px;
}

当我查看 Chrome 的开发工具时，最后一个 CSS 规范被划掉了。我不明白为什么它被“div#nav menu li”属性覆盖？最后一个具有自己 id 的 li 元素不是更具体吗？

任何帮助，将不胜感激。提前致谢。

Answer 1

覆盖它的更具体，它有两个标签和一个 id 选择器，而你的另一个只有一个标签和 id 选择器。

您可以将其更改为div#navmenu li#lastElement 或使其他选择器不太具体。

Answer 2

嗨，现在习惯了

div#navmenu #lastElement {
     margin-right: 0px;
}

或这个

div#navmenu li:last-child {
     margin-right: 0px;
}