페이지 본문 태그를 기반으로 한 CSS 강조 메뉴 항목

-1

메뉴가 있습니다. 해당 페이지를 기반으로 하위 메뉴 항목을 강조하고 싶습니다. 페이지에서 id가있는 div 태그를 사용할 수 있습니까? ID가 있으면 항목을 강조 표시합니다. 페이지 본문 태그를 기반으로 한 CSS 강조 메뉴 항목

#doc3 #menu li#subnav-5-1 a

CSS를

에서 다음

<div id="doc3"></div>

몸

에서

나는 이것을 시도했지만 제대로 작동 dosent. 페이지 본문의 id를 기반으로 다른 요소의 스타일을 변경하려면 어떻게해야합니까?

메뉴 ...

<!-- Menu 5 -->  
    <li id="nav-5"><a href="ssslate.do">Micro</a> 
     <ul id="subnav-5"> 
      <li class="subnav-5-1"><a href="asdf.do">Site & Visit</a></li> 
      <li><a href="ss.do">MIC</a></li> 
      <li><a href="ss.do">sss</a></li> 
     </ul> 
    </li>

CSS

body.nav-5-1 li.subnav-5-1 {background-color:red;}

에서는 HTMLBody

<body id=nav-5-body class="nav-5-1">

감사

출처

2010-05-18 Sai

클래스 이름에서 모든 대시를 제거하십시오. 다른 브라우저는 클래스에서 대시와 다르게 동작합니다. – sohtimsso1970

메뉴의 각 항목에 클래스를 넣고 다음 하위를 사용 CSS에서 분류하여 강조 표시 본문에 기반한 항목.

이

<li class="userView"> 
<li class="userEdit"> 
<li class="userAdd">

그런 다음 CSS의 모습 : 동일했다 자들에 수업을 할

<body class="userEdit">

그리고 메뉴 항목 :

그래서 몸은 페이지를 정의하는 클래스를 가질 것 :

body.userEdit li.userEdit {background-color:red;} /* selected colors go here */

그러나 이것은 비효율적 인 방법으로 메뉴에서 선택한 항목이입니다. 서버에서 어떤 항목이 선택되었는지 간단히 결정하고 해당 항목에 selected 클래스를 추가 한 다음 .selected {background-color:red;}을 CSS에 추가하는 것이 좋습니다. 이렇게하면 비트를 절약하고 확장 할 수 있습니다.

출처

2010-05-18 15:26:11 sohtimsso1970

나는 지치고, 게시물을 업데이 트 ... 작동하지 않았다 내가 뭔가 잘못 했어 ..? – Sai

클래스 이름에서 모든 대시를 제거하십시오. 다른 브라우저는 클래스에서 대시와 다르게 동작합니다. – sohtimsso1970

실제 html 구조가 표시되지 않았습니다.

<div id="doc3"> 
    <ul id="menu"> 
    <li id="subnav-5-1"><a href="somePage.html">Some page</a></li> 
    </ul> 
</div>

스타일이 <a> 태그에 적용됩니다 :
가 지정한 CSS 스타일 (#doc3 #menu li#subnav-5-1 a)이 같은 HTML 구조에 영향을 미칠 것입니다.

출처

2010-05-18 15:42:11 awe

오른쪽에 맞지 않습니다. – Sai

페이지 본문 태그를 기반으로 한 CSS 강조 메뉴 항목

답변

관련 문제