选择列表菜单的良好做法

Question

考虑这个标记：

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

Answer 1

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

严格来说，您提供的 select or 是有效的，并且 select 您的 #mainmenu 元素中的 <a> 元素。

但我想问： select 的 ul li 部分是必要的吗？您可以将它们都重写为

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

它们的工作原理相同，需要的解析更少。如果您只想 select <a> 元素是 <li> 元素的后代，您可以将 li 保留在 select 或者；但是，ul 不是必需的——这意味着您的 <li> 元素将是 <ul> 的 children（假设您正在编写有效的 HTML） .

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

I am having issues with some properties.

哪些属性导致了问题？

选择列表菜单的良好做法

Good practice on selecting a list menu

css

list

selector