css - 如何在 Wordpress 中设置特定页面链接导航栏的样式？

Question

我已经完成了布局设计。现在我想将我的设计包含在 Wordpress 主题中。我对 Wordpress 有一点了解，因为我刚开始学习它大约 1 周。

这是我的模板(还不是wordpress)

<ul class="nav navbar-nav">
    <li class="active_link"><a href="index.php">TOP PAGE</a></li>
    <li><a href="about.php">COMPANY PROFILE</a></li>
    <li><a href="product.php">PRODUCTS</a></li>
    <li><a href="services.php">SERVICES</a></li>
    <li><a href="download.php">DOWNLOAD</a></li>
    <li class="contact_us_link"><a href="contact_us"><span class="fa fa-envelope"></span> CONTACT US</a></li>
</ul>

我所做的是将它们创建为页面，所以我有以下代码:

<ul class="nav navbar-nav">
    <?php wp_list_pages('title_li='); ?>
</ul>

在我的最后一页，文本链接旁边会有一个信封图标，并且它具有不同的背景颜色。

我为此创建了这个 CSS:

#top-links-container .nav li:last-child {
    border: 1px solid #FB7E7E;
    background: #FB7E7E;
}

我得到了背景颜色，但文本颜色没有改变。我也尝试过这种方法，但所有文本链接都受到影响。

#top-links-container .nav li a:last-child {
    color: #fff;
}

有没有一种方法可以设置特定页面链接的样式？如何在最后一页链接旁边添加图标？

Answer 1

根据您的代码:

#top-links-container .nav .contact_us_link a {
    color: #fff;
}

如果 .fa 被其他 css 覆盖，您可能还需要设置样式。