1

您好想知道是否最好在 Web 应用程序中设置页面的菜单链接样式，仅设置a标签或li标签或两者兼而有之。

例子：

<ul id="mainMenu">
<li><a href="">myLink</a></li>
</ul>

我希望它是绿色的，在a标签或li上设置绿色更好吗？考虑到我将主要使用 js 与 php 和其他所有内容进行交互，根本不添加a标签并坚持使用li标签来触发 js 功能是不是很糟糕？（它主要是 ajax 和动态内容）。

谢谢

4

5 回答 5

1

a标签具有默认样式，可以赋予它们颜色，通常是下划线。因此，如果您想覆盖这些样式，则必须将它们应用于a自身，而不是li包含它。

于 2012-11-13T19:21:40.727 回答
1

通常，您不想为整个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;
}
于 2012-11-13T19:25:24.953 回答
1

您好想知道是否最好在 Web 应用程序中设置页面的菜单链接样式，仅设置 a 标签或 li 标签或两者兼而有之。

好吧，这取决于您希望站点导航（或其他列表使用）的格式类型，因为样式属性在两个元素之间的行为会有所不同。

一个明显的例子是来自某些属性的默认值，例如display。链接<a>标签的默认值是display:inline并且列表li标签将具有display:list-item默认样式，因此设置如下：

li {background-color: red;}

将不同于

a { background-color:blue;}

您可以看到一个功能小提琴，旨在显示两个标签占用的空间。

根本不添加 a 标签而只添加 li 标签来触发 js 功能是不是很糟糕？

a 标签已经具有一些使它们更加用户友好的属性。例如，如果您的用户已经访问过一个站点，您可以使用伪选择器设置您的标签样式:visited。您可以使用<li>元素轻松完成此操作。此外，标签已经将cursor属性设置为pointer当悬停时，即使您可以在列表元素中使用它，您也将使用更多的 css 来执行a标签默认的相同操作。

我的最后一条建议是，使用lists元素来设置导航链接的内部位置，并使用链接来关联 js 函数并设置导航规则的样式，例如何时访问链接、何时激活链接等等。

我希望它有所帮助。干杯

于 2012-11-13T19:31:31.837 回答
0

我会说做类似的事情：

 ul#mainMenu li a{
      your style
 }

这样，您就可以将样式应用于该菜单中的链接，而不会弄乱您将来可能添加的链接。

于 2012-11-13T19:17:31.970 回答
0

在这种情况下，您的 a 标签将始终覆盖父元素的颜色属性。也就是说，您需要为不同的属性设置样式，例如 li 的显示和标签的颜色。您的布局是完全有效的。

于 2012-11-13T19:20:07.157 回答