StaticMenuItemStyle против.StaticSelectedStyle – перезаписывает ли одно другое?
-
16-09-2019 - |
Вопрос
Я создаю собственный элемент управления asp:menu в ASP.NET, используя код C#.Он основан на карте сайта моего сайта.Вот основы меню:
<%@ 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, чтобы обойти эту проблему, но безуспешно.Спасибо.
Решение
Хитрость заключается в том, чтобы использовать CssClass и применять CSS только к гиперссылке (элементу «a»), а не к окружающей HTML-таблице, которую ASP.NET использует для отображения пункта меню.Вот автономный пример кода, иллюстрирующий поведение, которое вы ищете:
<%@ 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, применяемых к одним и тем же элементам A, и, возможно, также в том, как браузеры обрабатывают наследование от родительского элемента, к которому также применяются те же стили.(Элементы управления меню ASP.NET используют внутренние классы CSS для определения «встроенных» стилей, таких как «атрибут» шрифта-подчеркивания, и они применяют те же стили к элементам A, что и к родительским элементам.Взгляните на код View Source HTML, созданный моим примером выше или вашим кодом, чтобы лучше понять, как он работает.)
Я случайно наткнулся на трюк со вложенным CSS, когда пытался сузить круг причин проблемы.Кажется, что если вы примените CSS только к элементам A, объединение будет работать лучше.Вероятно, вы можете экспериментальным путем вывести основные правила, выполнив просмотр исходного кода для сгенерированного HTML и выборочно изменяя стили классов CSS, применяемые к каждому элементу.
Вы также можете попытаться расшифровать спецификацию CSS о том, как наследование и конфликты работают с классами CSS, но я подозреваю, что экспериментировать будет проще.:-)