选择列表菜单的良好做法答案

【问题标题】：Good practice on selecting a list menu选择列表菜单的良好做法
【发布时间】：2015-04-28 01:31:12
【问题描述】：

考虑到这个标记：

 <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/

【问题讨论】：

#mainmenu 一个 {} 应该够了吗？
请编辑您的答案以包括您遇到问题的属性。这些选择器中没有 CSS。
您需要提供准确的代码。即在括号内正确调试它。
只是风格的东西，没有任何相关性：我主要关心的是如何正确选择这些项目。

标签： css list selector

【解决方案1】：

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

严格来说，您提供的选择器是有效的，并且会选择您的 #mainmenu 元素中的 <a> 元素。

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

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

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

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

我遇到了一些属性问题。

哪些属性会造成问题？

【讨论】：

这些都是好话 - 谢谢。别管我遇到的问题，这些问题是由其他错误功能引起的。谢谢。