Question

我使用wp_list_categories生成一个类别及其子类别的列表，但它会在ul和li中生成一个列表。我想通过更改每个类别的颜色来更改它的样式，并删除类别前的点并将点更改为>

<ul class="footer_menu">    
<li class="cat-item cat-item-11">
    <a href="http://www.mytest.com/category/test1/">Test1</a>
    <ul class="children">
        <li class="cat-item cat-item-13">
            <a href="http://www.mytest.com/category/test1/sub-test1-1/">Sub test1 1</a>
        </li>
        <li class="cat-item cat-item-14">
            <a href="http://www.mytest.com/category/test1/sub-test2-1/">Sub test2 2</a>
        </li>
        <li class="cat-item cat-item-15">
            <a href="http://www.mytest.com/category/test1/sub-test3-1/">Sub test3 3</a>
        </li>
    </ul>
</li>
<li class="cat-item cat-item-4">
    <a href="http://www.mytest.com/category/test2/">Test2</a>
    <ul class="children">
        <li class="cat-item cat-item-16">
            <a href="http://www.mytest.com/category/test2/sub-test2-2/">Sub test2 1</a>
        </li>
        <li class="cat-item cat-item-18">
            <a href="http://www.mytest.com/category/test2/sub-test2-2/">Sub test2 2</a>
        </li>
        <li class="cat-item cat-item-19">
            <a href="http://www.mytest.com/category/test2/sub-test2-3/">Sub test2 3</a>
        </li>
    </ul>
</li>

这是我的CSS：

.content_footer_menu {background-color: #000;font-family: "Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif; margin:10px 0; color: #fff;}

ul.footer_menu {background-color: #000;font-size:11px; padding: 20px; margin: 10px 0 10px 240px; width: 1269px;}

.footer_menu, .footer_menu ul { line-height:1; margin:0; padding:0; }
.footer_menu li { float:left; padding:20px; margin: 0; list-style: disc; list-style-position: inside;}
.footer_menu a{ color:#999; text-decoration: none; }
.footer_menu a:hover { color:#fff;}
.footer_menu ul {padding: 0;}
.footer_menu ul { margin:0; padding: 20px 0 0 0;}
.footer_menu li li{float: none;padding: 0 20px 20px 0;}
.cleaner{clear: both;}
.current_page_item a{color: #fff;}
.footer_menu .current_page_item li a{color: #999;}

非常感谢！

Answer 1

我认为list-style-type没有任何其他方式显示为箭头。您需要进行一些更改，如下面的代码

<style type="text/css">
ul { list-style-image: url("/images/arrow.gif") }
</style>

Answer 2

删除list-style: disc;并将以下内容添加到您的css：

ul{list-style-type: none;} /*removes the dot*/
li:before{content:">";} /*adds the arrow*/
.cat-item a{color:red;} /*changes the color*/

这里是fiddle

您可以在listutorial

上找到有关如何设置列表样式的大量信息

更改列表的样式

2 个答案: