Question

我想通过使用CSS突出显示当前页面，但不知怎的，它不起作用。请看下面的代码。

HTML

    <body id="home"> 
<div id="mainNav">
        <a href="/Dashboard/Index" id="navIndex">
           <div class="circle text-uppercase">
              <div class="icon23X27"><img src="~/Content/icons/dashBoard.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Dashboard</span>
          </div>    
       </a>

       <a href="/samples/register/" id="navRegister">
          <div class="circle text-uppercase">
             <div class="icon23X27"><img src="~/Content/icons/samples.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Sample Registration</span>
            </div>   </a>

      <a href="/samples/search/"> 
        .........
</div>

CSS

body#/samples/register a#navRegister .textStyle {
    background-color:red !important
}

Answer 1

语法错误。使用这种方式：

body a#navRegister[href="/samples/register"] .textStyle {
    background-color:red !important
}

你的div在<a>里面是一个最糟糕的例子，就像在一些水里面放一个瓶子，而不是瓶子里的水，这是正确的。

Answer 2

获取您的正文ID，在这种情况下为doGet()，并将其与主页面元素上的ID结合使用，在本例中为#home：

#navIndex

然后，您可以为每个页面添加一个选择器，以便仅使用css捕获导航中的当前页面：

#home #navIndex .textStyle {
    background-color: red;
}

在css的几个边缘情况下只删除它#home #navIndex .textStyle, #register #navRegister .textStyle { background-color: red; }，应该避免（我很欣赏其中一个边缘情况只是试图让选择器显示出一些明显的效果，这可能就是你对发布的css所做的事情。

您还可以使用类而不是ID作为css选择器。

警告：

最好在html服务器端渲染它，因为服务器可以使用请求URL来决定哪个导航项是最新的。这样您就可以在当前导航范围内添加!important类，并且您的css将变为：

selected-nav-text

这更简单，您可以在服务器端编写逻辑以计算当前导航和css一次以突出显示它，然后当您更改导航时，功能将立即生效。

使用CSS突出显示当前页面

2 个答案: