考虑这个标记:
<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{}
答案 0 :(得分:0)
我有点不确定你在问什么...
严格地说,您提供的选择器有效,并会选择<a>
元素中的#mainmenu
元素。
但我会问:选择器的ul li
部分是否必要?您可以将它们重写为
#mainmenu a {}
#mainmenu a:hover {}
并且它们的工作方式相同,并且需要较少的解析。如果您只想选择<a>
元素后代的<li>
元素,则可以将li
保留在选择器中;但是,ul
不是必需的 - 暗示您的<li>
元素将是<ul>
的子元素(假设您正在编写有效的HTML)。
另一个注意事项:<a>
元素是内联,这意味着它们意味着在文本级别执行操作。另一方面,<h1>
元素是块级元素,因此不属于<a>
元素。实际上,您通常不应该在页面上有多个<h1>
,更不用说使用<h1>
标记菜单项了。如果您希望菜单项像标题一样大,请使用CSS规则以这种方式设置样式。
我遇到了一些属性的问题。
哪些属性会造成麻烦?