将wordpress分类目录与页面整合为自定义导航栏(二)

       在《将wordpress分类目录与页面整合为自定义导航栏(一)》一文中我通过修改ribbon主题的header.php中的代码将导航栏的框架搭出来了,但还未对其进行装饰,这篇文章将记录我用匮乏的css知识来装饰小站导航栏的过程。

       上篇文章中提到在http://codex.wordpress.org/Template_Tags/wp_list_categories看到了wp_list_categories的css selectors的相关信息

wpCatListCss

        经过学习,我终于明白了这些css selestors的意义:

cssSelector

         1.我希望点选导航栏某目录或浏览该目录下的文章时,该目录可以高亮显示。

         根据上述表格,我在style.css中添加了如下代码

         刷新后测试,发现由分类目录构成的导航栏可以正常高亮显示。

      可是在点击“关于小站”时,该栏不会高亮显示,为什么呢?点选它的时候,它确实有名为current-page-item的class啊,此为不解之一。

         2.我还希望当鼠标停留在分类目录的子目录下时,子目录背景色可以显示我指定的颜色。

         我先在在style.css中添加了如下代码,可是这段代码没有作用,为什么呢?

     经过各种尝试,我发现加入下述代码后,我的子目录下的北京色可以显示我指定的颜色,可以显示的颜色都跑出框框了,这又是为什么?我又去打扰了Keenwon站长,Keenwon站长建议我去掉width:100%,果然有效,但他没有告诉我为什么。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Fork me on GitHub