css - 如何在 wordpress 中设置 wp_list_page 的样式？

Question

我正在尝试为 wp_list_page 输出的列表设置样式，基本上我想将每个页面包装在一个圆形框中。我似乎能做的就是在 CSS 上设置 LI 和 UL 的样式，但我不起作用。

知道怎么做吗？

谢谢

Answer 1

输出以下类型的 html。

确保用 ul 包裹它像这样<ul class="main-nav"><?php wp_list_pages(); ?></ul>

这是典型的输出。

 <li class="pagenav">Pages
   <ul>
    <li class="page_item page-item-2"><a href="/">Sample Page</a></li>
    </ul>
 </li>

在您的 css 中，您可以像这样编辑它。

li.page_item {border:1px solid green;}
li.page_item a {color:yellow;}
etc...

如果您希望页面链接是圆形的，您可以插入 border-radius 语法。

li.page_item {border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;