您好想知道是否最好在 Web 应用程序中设置页面的菜单链接样式，仅设置 a 标记或 li 标记或两者都设置样式。
例子：
<ul id="mainMenu">
<li><a href="">myLink</a></li>
</ul>
我希望它是绿色的，在 a 标记或 li 上设置绿色更好吗？ 考虑到我将主要使用 js 与 php 和其他所有内容进行交互，根本不添加 a 标签并坚持使用 li 标签来触发 js 是不是很糟糕函数？（主要是 ajax 和动态内容）。
谢谢
【问题讨论】：
标签： javascript html css tags styles
您好想知道在 Web 应用程序中设置页面的菜单链接样式是否更好，只设置 a 标签或 li 标签或两者兼而有之。
嗯，这取决于您希望站点导航（或其他列表使用）的格式类型，因为样式属性在两个元素之间的行为会有所不同。
一个明显的例子是一些属性的默认值，比如display。链接<a>标签的默认值是display:inline，列表li标签将display:list-item作为默认样式，所以设置类似：
li {background-color: red;}
将不同于
a { background-color:blue;}
您可以看到一个功能性的fiddle，它旨在显示两个标签所占用的空间。
根本不加a标签，只贴li标签来触发js函数是不是很糟糕？
a 标签已经具有一些属性，使它们更加用户友好。例如，如果您的用户已经访问过一个站点，您可以使用伪选择器 :visited 设置您的标签样式。您可以使用 <li> 元素轻松完成此操作。此外，标签在悬停时已经将cursor 属性设置为pointer，即使您可以在列表元素中使用它，您也会使用更多的css 来执行a 标签默认的相同操作。
我的最后一条建议，使用 lists 元素来设置导航链接的内部位置，并使用链接来关联 js 函数并设置导航规则的样式，例如访问链接时，链接处于活动状态时等等。
我希望它有所帮助。干杯
【讨论】：
a 标记具有默认样式，这些样式赋予它们颜色，通常是下划线。因此，如果您想覆盖这些样式，您必须将它们应用到 a 本身，而不是包含它的 li。
【讨论】：
通常，您不想为整个tag 着色。
当发生变化或项目扩展时，它会变得混乱。
所以，而不是
li {
/*Your styles here*/
/*this is not a great method*/
}
您可能想添加一些对它的引用。 所以你的html喜欢，
<ul class="someclass">
<li>
<a>This is a link</a>
</li>
</ul>
因此，像css一样
ul.someclass li {
/*Your styles here */
}
现在，在上面的示例样式中，混淆是将样式应用于父元素 (<li>) 还是子元素 (<a>)。
子元素将从其父元素继承属性。
因此，如果您的大多数子元素具有与其父元素相同的大多数属性，请将样式应用于父元素。
如果您只需要子元素的某些样式，只需将那个样式添加到子元素即可。
示例（上面的 HTML）：
ul.someclass li {
font-size:24px;
font-weight: bold;
}
ul.someclass li a {
color:blue;
}
【讨论】：
我会说做类似的事情：
ul#mainMenu li a{
your style
}
通过这种方式，您可以将样式应用于该菜单中的链接，而不会弄乱您将来可能添加的链接。
【讨论】：
ul#mainMenu 是多余的，因为页面上只能有一个 ID 为 mainMenu 的元素。
#mainMenu 不是另一个页面上的ul。
在这种情况下，您的 a 标签将始终覆盖父元素的颜色属性。也就是说，您需要为不同的属性设置样式，例如 li 的显示和标签的颜色。您的布局完全有效。
【讨论】：