突出显示当前页面链接

时间:2015-12-03 10:39:26

标签: html css wordpress

到目前为止,我已经在Wordpress中构建了这个网站。 enter image description here

我通过在Wordpress左侧边栏小部件中输入此代码手动创建了左侧的导航链接:

<ul>
<li><h5><a class="page page-id-35 page-template-default logged-in admin-bar no-customize-support tc-fade-hover-links tc-l-sidebar tc-sticky-header sticky-disabled tc-transparent-on-scroll no-navbar skin-green tc-side-menu tc-sticky-footer sn-right" href="?page_id=35/" >This is page 1</a></h5></li>

<li><h5><a class="page page-id-39 page-template-default logged-in admin-bar no-customize-support tc-fade-hover-links tc-l-sidebar tc-sticky-header sticky-disabled tc-transparent-on-scroll no-navbar skin-green tc-side-menu tc-sticky-footer sn-right" href="?page_id=39/">This is page 2</a></h5></li>
</ul>

您在那里看到的长类名称是通过查看两个页面中每个页面的源代码得到的。

然后,在CSS样式表中,我添加了这个:

.page.page-id-35.page-template-default.logged-in.admin-bar.no-customize-support.tc-fade-hover-links.tc-l-sidebar.tc-sticky-header.sticky-disabled.tc-transparent-on-scroll.no-navbar.skin-green.tc-side-menu.tc-sticky-footer.sn-right a.page.page-id-35.page-template-default.logged-in.admin-bar.no-customize-support.tc-fade-hover-links.tc-l-sidebar.tc-sticky-header.sticky-disabled.tc-transparent-on-scroll.no-navbar.skin-green.tc-side-menu.tc-sticky-footer.sn-right,
.page.page-id-39.page-template-default.logged-in.admin-bar.no-customize-support.tc-fade-hover-links.tc-l-sidebar.tc-sticky-header.sticky-disabled.tc-transparent-on-scroll.no-navbar.skin-green.tc-side-menu.tc-sticky-footer.sn-right a.page.page-id-39.page-template-default.logged-in.admin-bar.no-customize-support.tc-fade-hover-links.tc-l-sidebar.tc-sticky-header.sticky-disabled.tc-transparent-on-scroll.no-navbar.skin-green.tc-side-menu.tc-sticky-footer.sn-right 
{
  background:red;
  color:white;
}

我希望在浏览器上加载相应的页面时,左侧的链接会突出显示。页面加载正常,但没有突出显示。谁知道我做错了什么?或者是否有其他技术可以突出显示当前页面的导航菜单?

0 个答案:

没有答案