编辑“用CSS定制样式列表”（章节）

==改变单个列表项==

如果想用图片来代替列表项，每个LI标签都必须有一个属于自己的类或ID。可以试试Classy wp_list_pages插件。

'''定制列表风格'''

项目符号是列表的一个重要部分——它用一个引人注目的圆点或图形告诉访问者“这是一个列表”。项目符号的样式和列表的数字编号由样式表单中的列表样式符号属性决定。该属性的默认值为disc。其它基本属性值包括circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, 以及none。下面我们试着修改默认属性值，例如可以把项目符号改成一个方形（square）。

 #sidebar li {
   list-style: square;
 }
代码中没有使用list-style-type，而用了缩写形式list-style，也没有使用默认值disc，列表的项目符号是方形。

但不是所有列表都需要项目符号，有时根据格局分布我们也可以看出“这是一个列表”。要删除项目符号，请将样式表单改成：
 #sidebar li {
   list-style: none;
 }
现在，在#sidebar ID中的DIV标签里，< li>标签内所有内容都不显示项目列表了。观察不同属性值造成的结果。

提示：考虑到网站的可访问性，有序列表比无序列表更易于导航。

'''用自定义图片代替项目符号'''

如果厌倦了项目符号，可以利用一些CSS技巧来变换新花样。在下面的例子中，我们用列表样式图片指示浏览器用项目符号图片代替传统的默认项目符号。

先找到一些有趣的项目符号图形，然后在样式表单中加入下列代码，为列表添加一些活泼的项目符号：

 #sidebar ul {
 list-style-image: url(/wp-images/image.gif);
 }
这时我们也可以使用绝对路径而不是相对路径。只要将 url(/wp-images/image.gif )换成url(http://example.com/wp-images/image.gif)就可以了。

'''添加列表边框'''

只要在标题下的ul最上方（而不是在标题上方）加上一个边框样式，就可以为列表添加边框（比如说下划线）了。

 #sidebar ul ul {...; border-top: solid 1px blue; ....}
更深一步的话，我们还可以在列表外添加文本框，列表标题则显示在文本框顶上：
 #sidebar ul ul {...; border: solid 1px blue; ....}
最后为列表边框添加背景色：
 #sidebar ul ul {...; border-top: solid 1px blue;       
     background:#CCFFFF; ....}
最终显示结果是：

[[Image:1 0.jpg|用CSS定制样式列表]]

或者进一步开发列表设计的可能性：

[[Image:2 0.jpg|用CSS定制样式列表]]

更改列表项目符号和列表样式能给我们带来很多乐趣。如果使用项目符号和列表时遇到麻烦，可以从下面给出的资料中寻找解决方法，也可以到WordPress论坛上寻求帮助。

'''嵌套列表常见问题解答'''

如果在使用嵌套列表时出现问题，可以看看下面的介绍，或许它能提供解决办法。也可以点击疑难解答中“设计方面的疑难解答”了解更多关于设计列表的问题。

'''标签结构不当'''

嵌套列表不能通过验证，首先可能是由不适当的列表结构引起。下面是一个简化的正确嵌套列表结构。注意：新建的嵌套列表开始嵌套时，最后一个列表项后的</li>标签实际上并没有关闭。指导嵌套列表完全结束后，该标签才算是关闭了。

 < ul>
   < li>Category One</li>
   < li>Category Two     <----Note: No Closing List Tag
   < ul>
   < li>Sub-Category One</li>
   < li>Sub-Category Two     <----Note: No Closing List Tag
    < ul>
    < li>Sub-Sub-Category One</li>
    < li>Sub-Sub-Category Two</li>     <----Note: Closing List Tag
    </ul></li>           <----Note: Nested List Closed
      < li>Sub-Category Three</li>
      </ul></li>       <----Note: Nested List Closed
     < li>Category Three</li>
 </ul>      <----Note: End of entire list

<STRONG>模板标签列表</STRONG>

列表中不同的[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE.html 模板标签]对列表标签的用法和依赖程度也有所不同。有些标签会自动包括UL和LI标签，我们只需要在列表中加入标签本身即可，标签会帮我们完成接下来的任务。而其它标签则要求UL紧跟在模板标签后，模板标签再标签生成属于自己的LI标签。其它模板标签需要决定哪些列表标签是必需的，如果标签的参数中没有列出列表标签，则无需使用任何列表标签。

在嵌套列表中使用[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE-wp_list_categories%28%29.html wp_list_categories]与 [http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE-wp_list_pages%28%29.html 
wp_list_pages]等模板标签时如果出现问题，请检查这些标签的参数，了解标签怎样使用列表标签，并将其用法与自己的用法相比

<STRONG>从属关系（父/子关系）</STRONG>

[http://www.wordpress.la/codex-CSS%E7%96%91%E9%9A%BE%E8%A7%A3%E7%AD%94.html#parent [[CSS]]父子关系]中曾讨论过，列表是引发严重错误的源头之一。设置子列表项会受到父列表项影响。如果父列表是红色，而我们希望子列表是蓝色，那么我们就得将子列表样式中的颜色改成蓝色，用这样的方法来改变父列表对子列表的遗传影响。

WordPress侧边栏中的嵌套列表通常都带有链接。因此我们虽然可以修改列表样式，但链接样式最终会改写列表样式。可以为每个链接指定一个属于该链接本身的、特定的样式类，包括链接的hover属性，以此控制列表中链接的运行方式：

 #sidebar a {attributes}  
 #sidebar a:hover {attributes}  
 #categories a {attributes}  
 #categories a:hover {attributes}  
 #archives a {attributes}  
 #archives a:hover {attributes}