Question

我试图搜索这个主题，但要找到合适的关键字来找到我正在寻找的东西是一个很难的主题。

#menu-nav ul {...}和ul#menu-nav {...}之间的区别是什么？

我正在努力在Wordpress主题中创建一个内联块导航菜单，这里是产生我想要的效果的CSS（即删除列表样式类型，创建块，将它们置于父容器中等）

ul#menu-nav  {
margin:0 auto; 
padding:0;
}
#menu-nav li {
list-style-type:none; 
display:inline-block; 
width:118px; 
height:56px; 
color:white; 
border:1px solid black;
}

如果我将ul#menu-nav {...}更改为#menu-nav ul，padding:0;和margin:0 auto将不再覆盖用户代理样式表。坦率地说，这让我觉得我的CSS是hacky而且我错了。

任何建议或帮助或参考都会有很大帮助！我想完全理解为什么会产生不同的结果。

Answer 1

#menu-nav ul {...}

表示标记内ul

的任何id="menu-nav"

和

ul#menu-nav {...}

表示ul id="menu-nav"

Answer 2

ul#menu-nav和#menu-nav ul意味着非常不同的事情。

ul#menu-nav表示“ul标记，其ID为”menu-nav“。（这是多余的，因为id无论如何都需要是唯一的除非我认为内容足够动态，否则id可能会在不同情况下应用于不同类型的元素，但这无论如何都可能是一个令人困惑的设计。）

示例：

<ul id="menu-nav"> <-- This is what's being selected
    <!-- any other content -->
</ul>

#menu-nav ul表示“ul标签，它是元素的后代，是”menu-nav“。

示例：

<div id="menu-nav">
    <ul></ul> <-- This is what's being selected
</div>

CSS中的Id和Tag选择器

2 个答案: