似乎无法覆盖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;
}