StaticMenuItemStyle против.StaticSelectedStyle – перезаписывает ли одно другое?

StackOverflow https://stackoverflow.com/questions/1676334

Вопрос

Я создаю собственный элемент управления 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, но я подозреваю, что экспериментировать будет проще.:-)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top