【问题标题】:Need to change the Colour of each menu heading. - Wordpress需要更改每个菜单标题的颜色。 - WordPress
【发布时间】:2015-04-09 10:08:24
【问题描述】:

我有一个网站:

http://cancersurvivorshipireland.com/cancersurvivorshipireland.com/wordpress/ (临时地址)

但我在标题中的所有菜单主题都是相同的颜色,它们都是绿色的。我试图让它们有不同的颜色。

例如。主页 = 绿色,新闻 = 红色,博客 = 黄色。但完全不知道该怎么做?

【问题讨论】:

    标签: html css wordpress header themes


    【解决方案1】:

    您可以使用CSS nth child selector 执行此操作,如下所示:

    #menu-default li:nth-child(1) a { 
        color: green;
    }
    #menu-default li:nth-child(2) a { 
        color: red;
    }
    #menu-default li:nth-child(3) a { 
        color: yellow;
    }
    #menu-default li:nth-child(4) a { 
        color: orange;
    }
    #menu-default li:nth-child(5) a { 
        color: blue;
    }
    

    【讨论】:

      【解决方案2】:

      您可以在列表元素上使用:nth-child。将此添加到您的 css 文件中

      #menu-default > li:nth-child(1) > a { color: green; }
      #menu-default > li:nth-child(2) > a { color: red; }
      #menu-default > li:nth-child(3) > a { color: yellow; }
      #menu-default > li:nth-child(4) > a { color: white; }
      #menu-default > li:nth-child(5) > a { color: orange; }
      

      【讨论】:

        【解决方案3】:

        这些菜单项中的每一个都有一个不同的 id 和一个匹配的类,li.menu-item-39 也是 li#menu-item-39。您可以使用 CSS 来定位这些 id 或类,无论您更喜欢哪一个。

        li.menu-item-39 > a { /* Home */
          color: green;
        }
        li.menu-item-43 > a { /* News */
          color: red;
        }
        li.menu-item-47 > a { /* Blog */
          color: yellow;
        }
        

        编辑以解决其他答案:您可以使用 :nth-child 伪类来执行此操作,但这仅适用于支持 CSS3 的浏览器。

        【讨论】:

        • 我认为应该注意的是,虽然这个解决方案具有更好的浏览器兼容性,但它可能不如nth-child灵活。如果用户在某个时候更改了菜单项,那么menu-item-* 类将会改变。即menu-item-46 => menu-item-67.
        • 好点,饥饿之星。可以使用以下 CSS2 选择器填充 :nth-child 伪类:#menu-default li:first-child > a 相当于 #menu-default li:nth-child(1) > a#menu-default li:first-child + li > a 相当于 #menu-default li:nth-child(2) > a#menu-default li:first-child + li + li > a 相当于 #menu-default li:nth-child(3) > a
        【解决方案4】:

        您需要进入我假设的navigation.php 文件并向每个文件添加css id 参数,然后在styles.css 中为它们提供任何条目以分配颜色。

        如果您不熟悉编辑文件或更改代码,这不是一件容易的事。

        这是一些css代码:

        #menu-default > li:nth-child(1) > a { color: green; }
        #menu-default > li:nth-child(2) > a { color: red; }
        #menu-default > li:nth-child(3) > a { color: yellow; }
        #menu-default > li:nth-child(4) > a { color: white; }
        #menu-default > li:nth-child(5) > a { color: orange; }
        

        【讨论】:

        • 如果您可以访问您的 css 文件或可以通过 WordPress 管理员进行编辑,这不是一个困难的解决方案。不知道你为什么提到navigation.php。 WordPress 为您为每个 li 添加 id。你让这变得比它需要的更复杂。
        • 如果您没有编辑 WP 文件的经验。你假设他有一个正确编码的主题。
        猜你喜欢
        • 1970-01-01
        • 2013-11-01
        • 2017-02-06
        • 2020-11-17
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-03-31
        相关资源
        最近更新 更多