-3

我曾尝试搜索此主题，但很难找到正确的关键字来找到我正在寻找的内容。

#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 并且我正在处理这个错误。

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

4

2 回答 2

1 
#menu-nav ul {...}

ul表示标签内的任何内容id="menu-nav"

和

ul#menu-nav {...}

意味着一个ul与id="menu-nav"

于 2013-11-12T01:42:51.183 回答
1

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

ul#menu-nav意思是“ ulid 为”menu-nav”的标签。（这有点多余，因为id无论如何都需要是唯一的，所以哪个元素拥有它并没有什么区别。除非我认为内容足够动态以至于有可能id会在不同情况下应用于不同类型的元素，但这可能是一个令人困惑的设计。）

例子：

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

#menu-nav ul表示“作为ul元素后代的标签”是“菜单导航”。

例子：

<div id="menu-nav">
    <ul></ul> <-- This is what's being selected
</div>
于 2013-11-12T01:44:09.580 回答