基於頁面主體標籤的CSS高亮菜單項

-1

我有一個菜單，我想突出顯示基於它們所在頁面的子菜單項。我可以在頁面上使用帶有ID的div標籤，並在CSS中如果該ID在那裏，則突出顯示該項目。基於頁面主體標籤的CSS高亮菜單項

身體

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

然後在CSS

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

我試過，但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 2010-05-18 17:16:04

把一個類中的每一項菜單，然後用分在CSS中進行分類以突出顯示該項目基於身體。

所以會對身體有定義的頁面類：

<body class="userEdit">

和菜單項會對它們類，都是一樣的：

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

然後你的CSS看起來像：

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

但是，這是一種低效率的方式來建立一個菜單與選定的項目。最好簡單地確定在服務器上選擇哪個項目，並向該項目添加一個selected類，然後在您的CSS中有.selected {background-color:red;}。這將節省更多的比例和縮放比例。

來源

2010-05-18 15:26:11 sohtimsso1970

我累了，更新了帖子...沒有工作，我做錯了什麼..？ – Sai 2010-05-18 16:00:43

嘗試從類名中刪除所有破折號。不同的瀏覽器在類中使用不同的破折號。 – sohtimsso1970 2010-05-18 17:16:28

您沒有向我們展示您的實際html結構。
您指定的CSS樣式（#doc3 #menu li#subnav-5-1 a）會影響到HTML的結構是這樣的：

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

的樣式將被應用到<a>標籤。

來源

2010-05-18 15:42:11 awe

你對它的不正確。 – Sai 2010-05-18 16:03:07

基於頁面主體標籤的CSS高亮菜單項

回答

相關問題