StaticMenuItemStyle与StaticSelectedStyle - 做一件覆盖其他？ [英] StaticMenuItemStyle vs. StaticSelectedStyle - Does one overwrite the other?
问题描述
我建立一个自定义的ASP。它是基于网站地图到我的网站。这是菜单的基本知识：
I am building a custom asp:menu control in ASP.NET using C# code behind. It is based on the sitemap to my website. Here's the basics of the 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>
这应该是我想要的点击菜单项大胆地将不带下划线和所有其他项目必须强调pretty明显。问题是，每一个项目仍然下划线，虽然选择的项目也变得大胆。
It should be pretty obvious that I want the clicked menu item to be bold and not underlined and every other item to be underlined. The issue is that every item remains underlined, although the selected item does become bold.
一个有趣的试验来交换双方强调布尔值。其结果是，所选择的项目也变得突出，而其他所有的项目都没有下划线。这是预期的结果，但考虑到我所面临的问题的时候混淆。
An interesting test was to swap both underline boolean values. The result was that the selected item did become underlined, while all other items were not underlined. This is the expected result, but confusing when considering the problem that I am facing.
我试图使用的CssClass属性来解决这个问题，但都无济于事。
谢谢你。
I have attempted to use the cssclass attribute to get around this issue, but to no avail. Thanks.
推荐答案
诀窍是使用的CssClass和CSS只适用于超链接（以下简称一个Gurtin原理求），而不是周围的HTML表ASP。 NET应用显示的菜单项。下面是说明你正在寻找的行为自足code样品：</ P>
The trick is to use a CssClass, and apply the CSS only to the hyperlink (the "a" elenent) and not to the surrounding HTML table that ASP.NET uses to show a menu item. Here's a self-contained code sample illustrating the behavior you're looking for:
<%@ 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>
此问题的根本原因似乎是浏览器如何处理应用到同一个元素不同的CSS类定义了多个相互冲突的文字装修风格，或许还怎么浏览器从父也应用了相同的样式处理继承。 （ASP.NET菜单控件使用CSS类引擎盖下定义内联的风格，如字体下划线属性，而他们申请对A元素太父元素相同的样式。看一看查看源代码的HTML我的样品上方发出，或由code，得到它是如何工作的一个更好的主意。）
The underlying cause of this problem seems to be how browsers handle multiple conflicting text-decoration styles defined in different CSS classes applied to the same A elements, and perhaps also how browsers handle inheritance from a parent which also has the same styles applied. (ASP.NET's menu controls use CSS classes under the hood to define "inline" styles like the font-underline "attribute", and they apply the same styles on the A elements as the parent elements too. Take a look at View Source HTML emitted by my sample above, or by your code, to get a better idea of how it works.)
我在嵌套CSS伎俩有点偶然意外，因为我试图缩小问题的原因。看来，如果你申请的CSS只有A元素，更好的结合的作品。你也许可以推断出，通过实验，通过对生成的HTML做了查看源文件并选择不同风格应用到每一个元素的CSS类的基本规则。
I stumbled upon the nested CSS trick somewhat by accident, as I was trying to narrow down the causes of the problem. Seems that if you apply CSS to only the A elements, combining works better. You can probably deduce, by experiment, the underlying rules by doing a View Source on the generated HTML and selectively varying styles of CSS classes applied to each element.
您也可以尝试破译继承和冲突如何与CSS类的工作CSS规范，但我怀疑的实验会比较容易。 ： - ）
You can also try to decipher the CSS spec for how inheritance and conflicts work with CSS classes, but I suspect experimentation will be easier. :-)
这篇关于StaticMenuItemStyle与StaticSelectedStyle - 做一件覆盖其他？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
