CSS选择器（菜单UL LI）或（菜单里）

这是更好地使用CSS选择器（菜单UL LI）或（菜单里）

.menu{ 
    float:left; 
    width:600px; 
    height:25px; 
    background:url(bg.png) repeat-x; 

} 
.menu ul{ 
    float:left; 
} 
.menu ul li{ 
    float:left; 
    width:150px; 
    height:25px; 
    background:#F00; 
}

或

.menu{ 
    float:left; 
    width:600px; 
    height:25px; 
    background:url(bg.png) repeat-x; 

} 
.menu ul{ 
    float:left; 
} 
.menu li{ 
    float:left; 
    width:150px; 
    height:25px; 
    background:#F00; 
}

这标签是正确menu ul li或menu li？

来源

2010-06-28 Kali Charan Rajput

当你说which tag is right menu ul li or menu li?，你是在说一个与class="menu"格或你在谈论deprecated menu tag（<menu>）？

如果你只是在谈论你的CSS代码，那些不是标签，它们是选择器。而且我要提供最具体的选择去，以避免意外分配

.menu > ul > li{ 
    // this matches only list items directly inside a ul directly inside a .menu 
}

更妙的是这样的：

#menu > ul > li{ 
    // now you are referencing the menu by id, so you know this is a unique assignment 
}

，或者如果你有多个菜单：

#menubar > .menu > ul > li{ 
}

因为否则你是在惊喜，你可能实际上有这样的结构：（这是丑陋的，我知道，但只是为了证明一点）

<div class="menu"> 
    <ul> 
     <li>Menu Item 1</li> 
     <li>Menu Item 2</li> 
     <li>Menu Item 3 
     <ul> 
      <li id="abc">Menu Item abc</li> 
     </ul> 
     </li> 
     <li>Menu Item 4 
     <div><div><div><ol><li><div><ul> 
       <li id="xyz">Menu Item xyz</li> 
     </ul></div></li></ol></div></div></div> 
     </li> 
    </ul> 
</div>

（您可能不想匹配项目abc或xyz）。

来源

2010-06-28 13:39:46

我也要评论嵌套列表。这绝对是最好的方式。 – theorise 2010-06-28 13:57:00

只是一个说明。 *

*不再被弃用。它已被复活用于HTML5。 :) – 2011-03-28 14:06:33

@ J.T.S。很高兴知道，但在我写这篇文章之前我从来没有听说过它（我只是自己搜索了一下:-)） – 2011-03-28 14:40:34