选择列表菜单的好习惯

时间:2015-04-28 01:31:13

标签: css list selector

考虑这个标记:

 <div id="container">
    <div id="mainmenu">
     <ul>
      <li> <a href=""><h1>My Dashboard</h1></a></li><br>
      <li> <a href=""><h1>About</h1></a></li><br>
      <li> <a href=""><h1>Contact</h1></a></li><br>
      <li> <a href=""><h1>Setttings</h1></a></li><br>
      <li> <a href=""><h1>Log Out</h1></a></li><br>
     </ul>
    </div>
 </div>

选择这种方式是有效的吗?我遇到了一些属性的问题。

#container ul li{
    display: inline-block;

}


#mainmenu ul li a{}

#mainmenu ul li a:hover{}

完整样本: https://jsfiddle.net/jhr1q1q4/

1 个答案:

答案 0 :(得分:0)

我有点不确定你在问什么...

严格地说,您提供的选择器有效,并会选择<a>元素中的#mainmenu元素。

但我会问:选择器的ul li部分是否必要?您可以将它们重写为

#mainmenu a {}
#mainmenu a:hover {}

并且它们的工作方式相同,并且需要较少的解析。如果您只想选择<a>元素后代的<li>元素,则可以将li保留在选择器中;但是,ul不是必需的 - 暗示您的<li>元素将是<ul>的子元素(假设您正在编写有效的HTML)。

另一个注意事项:<a>元素是内联,这意味着它们意味着在文本级别执行操作。另一方面,<h1>元素是块级元素,因此不属于<a>元素。实际上,您通常不应该在页面上有多个<h1>,更不用说使用<h1>标记菜单项了。如果您希望菜单项像标题一样大,请使用CSS规则以这种方式设置样式。

  

我遇到了一些属性的问题。

哪些属性会造成麻烦?