Question

我正在使用C＃代码构建ASP.NET中的自定义asp：菜单控件。它基于我网站的站点地图。这是菜单的基础知识：

<%@ 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属性来解决这个问题，但无济于事。感谢。

Answer 1

诀窍是使用CssClass，并仅将CSS应用于超链接（“a”elenent），而不应用于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上执行View Source，并有选择地改变应用于每个元素的CSS类的样式。

您也可以尝试破解CSS规范，了解继承和冲突如何与CSS类一起使用，但我怀疑实验会更容易。： - ）

StaticMenuItemStyle与StaticSelectedStyle - 一个覆盖另一个吗？

1 个答案: