使用CSS体CSS类菜单

-1

我最近得到的任务，他们通过以下方式使用CSS体CSS类菜单

导航必须要使用样式解释此任务：hover伪类，而活动菜单点必须使用人体类

我的问题是第二个，即*的活动菜单点必须用身体类。以下是html代码片段。

<body class="home"> 
    <div id="wrapper"> 
     <div id="nav"> 
      <ul> 
       <li id="btnHome"><a href="#">Home</a></li> 
       <li id="btnAbout"><a href="#">About</a></li> 
       <li id="btnContact"><a href="#">Contact</a></li> 
       <li id="btnLinks"><a href="#">Links</a></li> 
      </ul> 
        </div> 
      </div> 
    </div>

如何使用body class来获取菜单项，以便当用户在主页上时，home链接将使用css来激活。其他链接也一样吗？

来源

2013-08-21 2619

我认为这意味着为每个页面身体类的变化，因此对于主页您该类家，为AboutPage您对类....

.home #btnHome { 
    /* active home menu code */ 
} 

.about #btnAbout { 
    /* active about menu code */ 
}

是你需要什么？

来源

2013-08-21 06:17:09

排序，但我可以使它更通用？我的意思是宁可为每个链接编写代码，只需使用一个代码，而不向这些元素添加额外的类和标识。 – 2619

您不能为菜单中的每个链接添加一个ID。你可以使用* .home #nav li：nth-child（0）：{...} *。但是你不能跳过新选择器的创建。 – Krasimir

看到你的任务说你必须使用主体类作为主动链接，只有这么多才能使它更“通用”。假设所有活动链接都有相同的类，你可以将它们捆绑在一个CSS规则中，例如**。home #btnHome，.about #btnAbout，.contact #btnContact，.links #btnLink {} **。您也可以为链接创建一个_active_类，这样您可以将它们定位为像。**。home .active，.about .active，.contact .active，.links .active {} **这样的目标。 –

使用CSS体CSS类菜单

回答

相关问题