Question

我有一个菜单，我想基于它们所在的页面突出显示子菜单项。我可以在页面上使用带有id的div标签，如果id在那里则使用css然后突出显示该项目。

身体

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

然后在css

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

我尝试了这个，但似乎有效。如何根据页面正文中的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">

由于

Answer 1

在菜单中的每个项目上放置一个类，然后在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;}。这样可以更好地节省比特和缩放比例。

Answer 2

您尚未向我们展示您的实际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>标记。

CSS突出显示基于页面正文标记的菜单项

2 个答案: