StaticMenuItemStyle과 StaticSelectedStyle - 다른 하나를 덮어 씁니까?

ASP.NET에서 C# 코드를 사용하여 사용자 지정 asp : 메뉴 컨트롤을 작성합니다. 그것은 내 웹 사이트의 사이트 맵을 기반으로합니다. 다음은 메뉴의 기초는 다음과 같습니다StaticMenuItemStyle과 StaticSelectedStyle - 다른 하나를 덮어 씁니까?

는

<%@ 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 속성을 사용하려고했지만 아무 소용이 없었습니다. 감사합니다. .

출처

2009-11-04 TahoeWolverine

사람이 단순히 최소한 이것을 재현하려고 할 수 있습니까? – TahoeWolverine

트릭은 CssClass를 사용하고 CSS 항목을 표시하기 위해 ASP.NET이 사용하는 주변 HTML 표가 아닌 하이퍼 링크 ("a"엘렌 톤)에만 CSS를 적용하는 것입니다. 여기에 당신이 찾고있는 동작을 설명하기위한 자체에 포함 된 코드 예제는 다음과 같습니다

이 문제의 근본 원인은 브라우저에서 동일하게 적용되는 다른 CSS 클래스에 정의 된 여러 개의 충돌하는 텍스트 장식 스타일을 처리하는 방법 것으로 보인다

<%@ 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 요소 및 브라우저가 동일한 스타일이 적용된 부모로부터의 상속을 처리하는 방법을 설명합니다. (ASP.NET의 메뉴 컨트롤은 CSS 클래스를 사용하여 글꼴 밑줄 "특성"과 같은 "인라인"스타일을 정의하고 부모 요소로 A 요소에도 같은 스타일을 적용합니다. 소스보기 HTML보기 위의 샘플 또는 코드를 통해 어떻게 작동하는지 더 잘 알 수 있습니다.)

문제의 원인을 줄이기 위해 우연히 중첩 된 CSS 트릭을 발견했습니다. CSS를 A 요소에만 적용하면 결합이 더 효과적이라고 생각됩니다. 생성 된 HTML에 View Source를 수행하고 각 요소에 적용된 CSS 클래스의 스타일을 선택적으로 변경하여 기본 규칙을 실험적으로 추측 할 수 있습니다.

CSS 클래스에서 상속 및 충돌이 작동하는 방식에 대한 CSS 사양을 해독하려고 할 수도 있지만 실험이 더 쉬울 것으로 생각됩니다. :-)

출처

2009-11-13 16:43:31

나는 당신의 답을 좋아한다. 특히 간단한 해결책이기 때문에 그렇다. 그러나 나는 이것이 스타일 속성을 인라인으로 나열하는 것과 다른 점을 이해하지 못한다. 여기에 차이점을 설명해 주시겠습니까? – TahoeWolverine

필자는 좀 더 자세한 내용으로 내 대답을 편집했습니다. 왜 작동하는지 정확히 알지 못하지만 잘하면이 동작을 제어하는 기본 규칙을 결정할 수있는 올바른 방향으로 지적했습니다. –

StaticMenuItemStyle과 StaticSelectedStyle - 다른 하나를 덮어 씁니까?

답변

관련 문제