StaticMenuItemStyle 与 StaticSelectedStyle - 一个会覆盖另一个吗？答案

【问题标题】：StaticMenuItemStyle vs. StaticSelectedStyle - Does one overwrite the other?StaticMenuItemStyle 与 StaticSelectedStyle - 一个会覆盖另一个吗？
【发布时间】：2010-12-13 04:15:11
【问题描述】：

我正在使用 C# 代码在 ASP.NET 中构建自定义 asp:menu 控件。它基于我网站的站点地图。以下是菜单的基本内容：

<%@ Control language="C#" autoeventwireup="true" codefile="Control.ascs.cs" inherits="menuClass" %>
<asp:menu id="myMenu" datasourceid="sitemap" runat="server">
    <staticmenuitemstyle font-underline="true" />
    <staticselectedstyle font-bold="true" font-underline="false" />
</asp:menu>

很明显，我希望单击的菜单项是粗体而不是带下划线的，并且每个其他项目都带有下划线。问题是每个项目都带有下划线，尽管所选项目确实变为粗体。

一个有趣的测试是交换两个下划线布尔值。结果是所选项目确实变成了下划线，而所有其他项目都没有下划线。这是预期的结果，但在考虑我面临的问题时会感到困惑。

我曾尝试使用 cssclass 属性来解决此问题，但无济于事。谢谢。

【问题讨论】：

至少有人能简单地尝试重现这个吗？

标签： asp.net user-controls underline aspmenu

【解决方案1】：

诀窍是使用 CssClass，并将 CSS 仅应用于超链接（“a”元素），而不应用于 ASP.NET 用于显示菜单项的周围 HTML 表。这是一个独立的代码示例，说明了您正在寻找的行为：

<%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <style type="text/css">
    .notSelected a
    {
        text-decoration:underline;
    }
    .selected a
    {
        font-weight:bold;
        text-decoration:none;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:menu id="myMenu" runat="server">
            <StaticMenuItemStyle CssClass="notSelected" />
            <StaticSelectedStyle CssClass="selected" />
            <Items>
                <asp:MenuItem Text="Test (selected)" Selected="true" NavigateUrl="~/Default.aspx"></asp:MenuItem>
                <asp:MenuItem Text="Test (not selected)" NavigateUrl="~/Default.aspx"></asp:MenuItem>
            </Items>
        </asp:menu>
    </div>
    </form>
</body>
</html>

这个问题的根本原因似乎是浏览器如何处理应用到相同 A 元素的不同 CSS 类中定义的多个冲突的文本装饰样式，也许还有浏览器如何处理从也应用了相同样式的父级的继承. （ASP.NET 的菜单控件在底层使用 CSS 类来定义“内联”样式，如字体下划线“属性”，并且它们在 A 元素上也应用与父元素相同的样式。看看查看源代码 HTML由我上面的示例或您的代码发出，以便更好地了解它的工作原理。）

当我试图缩小问题的原因时，我偶然发现了嵌套 CSS 技巧。似乎如果您仅将 CSS 应用于 A 元素，则组合效果更好。通过对生成的 HTML 进行查看源代码并有选择地改变应用于每个元素的 CSS 类的样式，您可以通过实验推断出基本规则。

您还可以尝试解读 CSS 规范，了解继承和冲突如何与 CSS 类一起工作，但我怀疑实验会更容易。 :-)

【讨论】：

我喜欢你的回答，特别是因为它是一个简单的解决方案，但我不明白这与内联列出样式属性有何不同。你能解释一下这里的区别吗？
我用更多细节编辑了我的答案——我不知道它为什么会起作用，但希望我能指出正确的方向来确定管理这种行为的基本规则。