编辑“WordPress:CSS的样式目录”

__TOC__When presenting lists of things, [[WordPress:WordPress]] uses standard [[WordPress:Glossary#XHTML|XHTML]] elements: 
__TOC__当呈现一列内容的时候，[[WordPress:WordPress|WordPress]]使用标准的[[WordPress:Glossary#XHTML|XHTML]]元素：

* <nowiki><ol></nowiki> for an Ordered List (where the order of items is important, so items are numbered)

* <nowiki><ol></nowiki>关于一个无序的列表（items的顺序非常重要，因此items是有限的）

* <nowiki><ul></nowiki> for an Unordered List (normally shown as items with bullets)

* <nowiki><ul></nowiki>关于一个无序列表(通常为带有bullets的item)

* <nowiki><li></nowiki> for each item in a list, ordered or unordered.

* <nowiki><li></nowiki> 关于列表中的每个item，有序或者无序的。

By default, most lists (and some list items) in WordPress are identified by <tt>id</tt> or <tt>class</tt> attributes, making styling lists easy.  With fairly simple changes to the <tt>style.css</tt> file, you can display the list [[WordPress:Creating_Horizontal_Menus|horizontally]] instead of vertically, feature [[WordPress:Dynamic_Menu_Highlighting|dynamic menu highlighting]], [[WordPress:#Styling_the_Bullet|change the bullet]] or numbering style, remove the bullets altogether, or any combination of these.

默认情况下，WordPress中的大多数列表(和一些列表 items)都是由<tt>id</tt> 或者<tt>class</tt>属性识别的，使得样式表变得非常简单。只要简单地更改<tt>style.css</tt>文件，你就可以[[WordPress:Creating_Horizontal_Menus|横向地]]而不是竖向地显示列表，特写 [[WordPress:Dynamic_Menu_Highlighting|突出动态菜单]], [[WordPress:#Styling_the_Bullet|更改bullet]]或者给样式编号，移除所有bullets，或者一些结合体。

== WordPress 1.5 Nested Lists Layout ==

== WordPress 1.5 嵌套列表布局 ==

With the innovation of [[WordPress:Using Themes|Themes]] in WordPress v1.5, different themes format lists in different ways.  The most common lists users often want to modify in WordPress are the sidebar menu lists.  Since many sidebars feature '''nested''' lists, let's look at those in more depth.

随着WordPress1.5版本中[[WordPress:Using Themes|主题]]的创新，不同的主题格式以不同的方式列出。列表用户一般最想要更改的是WordPress中的工具条菜单列表。因此许多工具条特点是'''嵌套'''列表，让我们更深入地看看这些。

Begin by examining the <tt>style.css</tt> file found within the Theme's folder you are using.  Most WordPress Themes label their sidebar menu section with the words ''sidebar'', ''menu'', or a combination of both.  So, look for the sidebar [[WordPress:Templates|Template]] file, typically called <tt>sidebar.php</tt>.  This is a sample <tt>sidebar.php</tt> layout; your version may be different, but the concept will be the same.

通过检查你使用的主题文件夹中的<tt>style.css</tt>文件开始。大多数WordPress主题用''工具条'', ''菜单'',或者两者的结合体来标记WordPress工具条菜单部分。查找工具条[[WordPress:Templates|模板]]文件，通常称为<tt>sidebar.php</tt>。这是个简单的<tt>sidebar.php</tt>布局；你的版本可能有所不同，但是基本的理念是相同的。

<pre><div id="sidebar">
<ul>
  <li id="search"><form method="get" id="searchform"
      action="/wordpress/index.php">
    <div><input type="text" value="" name="s" id="s" />
	<input type="submit" id="searchsubmit" value="Search" />
    </div></form></li>
  <li id="pagenav"><h2>Pages</h2>
    <ul>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=2"
	title="About Us">About Us</a></li>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=4"
        title="Contact">Contact</a></li>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=8"
        title="Site Map">Site Map</a></li>
	</ul></li>
  <li><h2>Archives</h2>
      <ul>
	<li><a href='http://www.examplesite.com/wordpress/?m=200502'
	 title='February 2005'>February 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200501'
	 title='January 2005'>January 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200412'
	 title='December 2004'>December 2004</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200411'
	 title='November 2004'>November 2004</a></li>
      </ul></li>
  <li><h2>Categories</h2>
     <ul>
	<li><a href="http://www.examplesite.com/wordpress/?cat=47"
	 title="Stories of our life">Stories</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=48"
	 title="Computer Tips">Computer Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=6"
	 title="WordPress Tips">WordPress Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=28"
	 title="Web Page Design Advice">Web Page Design</a></li>
     </ul></li>
  </ul>
</div></pre>

When you are working with nested lists and you want an individual style for each list, you have to recreate the "nest" in the stylesheet (<tt>style.css</tt>).

<pre>#sidebar ul {attributes}
#sidebar li {attributes}
#sidebar ul li {attributes}
#sidebar ul ul li {attributes}
#sidebar ul ul ul li {attributes}
#pagenav {attributes}
#pagenav ul {attributes}
#pagenav ul li {attributes}</pre>




<pre><div id="sidebar">
<ul>
  <li id="search"><form method="get" id="searchform"
      action="/wordpress/index.php">
    <div><input type="text" value="" name="s" id="s" />
	<input type="submit" id="searchsubmit" value="Search" />
    </div></form></li>
  <li id="pagenav"><h2>Pages</h2>
    <ul>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=2"
	title="About Us">About Us</a></li>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=4"
        title="Contact">Contact</a></li>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=8"
        title="Site Map">Site Map</a></li>
	</ul></li>
  <li><h2>Archives</h2>
      <ul>
	<li><a href='http://www.examplesite.com/wordpress/?m=200502'
	 title='February 2005'>February 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200501'
	 title='January 2005'>January 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200412'
	 title='December 2004'>December 2004</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200411'
	 title='November 2004'>November 2004</a></li>
      </ul></li>
  <li><h2>Categories</h2>
     <ul>
	<li><a href="http://www.examplesite.com/wordpress/?cat=47"
	 title="Stories of our life">Stories</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=48"
	 title="Computer Tips">Computer Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=6"
	 title="WordPress Tips">WordPress Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=28"
	 title="Web Page Design Advice">Web Page Design</a></li>
     </ul></li>
  </ul>
</div></pre>

When you are working with nested lists and you want an individual style for each list, you have to recreate the "nest" in the stylesheet (<tt>style.css</tt>).

<pre>#sidebar ul {属性}
#sidebar li {属性}
#sidebar ul li {属性}
#sidebar ul ul li {属性}
#sidebar ul ul ul li {属性}
#pagenav {属性}
#pagenav ul {属性}
#pagenav ul li {属性}</pre>

;ul :The first style (<tt>#sidebar ul</tt>) sets the look for the overall list.  It usually contains the margins and padding styles and may contain the font-family, color, and other details for the overall list.

；ul：第一种样式(<tt>#s工具条 ul</tt>)设置整个列表的外观。通常包括页边空白和padding样式而且可能包含字体集，颜色，以及其它的有关整个列表的详细信息。

;li :The <tt>#sidebar li</tt> assigns a style to the actual list item.  Here you can set the format to include a bullet or not. You can also change the font, font-size, or color, and you can even add borders.

;li : <tt>#工具条 li</tt>给真正的列表item指定了一个样式。你可以在这儿设定格式，包含还是不包含bullet。你也可以更改字体，字体大小，或者颜色，而且你甚至可以添加边框。

;ul li :The <tt>#sidebar ul li</tt> determines the style of the first nested list.  Each first level nested list will be customized here, but you can style each of these sub-lists differently if they are contained within a specific [[WordPress:Glossary#CSS|CSS]] ID.  In the above example, after the <tt>#search</tt> section, the first nested list is <tt>#pagenav</tt>.  If you use [[WordPress:Pages]] this is where the list of [[WordPress:Pages]] would be generated.  Since [[WordPress:Pages]] work outside of [[WordPress:The Loop|The WordPress Loop]], and often highlight specific information like "About Us", "Contact", and "Site Map", you may want to design the [[WordPress:Pages]] style differently than the rest of your lists by putting the specific information about the look of the [[WordPress:Pages]] in the <tt>#pagenav</tt>.

;ul li : <tt>#工具条 ul li</tt>决定了第一个嵌套的列表的样式。每个一级嵌套列表都是在这里定义的，但是如果这些子列表包含有一个特别的[[WordPress:Glossary#CSS|CSS]] ID，你可以将这些子列表设计为不同的样式。在上述的例子中，在<tt>#搜索</tt>部分的后面，一级嵌套列表是<tt>#pagenav</tt>。如果你使用[[WordPress:Pages|网页]]，会产生[[WordPress:Pages|网页]]的列表。因为[[WordPress:Pages|网页]]是在[[WordPress:The Loop|The WordPress Loop]]外运行的，而且通过会突出特别的信息，像"关于我们", "联系",和"站点地图",你可能想要将[[WordPress:Pages|网页]]样式与列表上的其它内容设计地不同，只要将关于[[WordPress:Pages|网页]]外观的特别的信息放到<tt>#pagenav</tt>中，就可以了。

;ul ul li :The <tt>#sidebar ul ul li</tt> applies style to the links within the <tt>#sidebar ul ul</tt> to help customize the look of this list.  Again, if you have customized the <tt>#pagenav</tt> list, it will be different from the rest of your nested list items.

;ul ul li :The <tt>#sidebar ul ul li</tt>将样式应用到<tt>#sidebar ul ul</tt>中的链接中，帮助自定义这个列表的外观。如果你已经自定义了<tt>#pagenav</tt>列表，就会与你的嵌套列表的其它items不同。

;ul ul ul li :The <tt>#sidebar ul ul ul li</tt> is the style for the sub-sub-list.  If you have a list of [[WordPress:Glossary#Category|categories]] with subcategories, the [[WordPress:Glossary#Category|category]] title will be the first level of the list, the categories would be the second level of the list, and any subcategories would be the third level, or sub-sub-list, such as the example below.  Some designers like having the third level list feature a smaller font, a different bullet, or even a different color to highlight them from the list items above them:

;ul ul ul li : <tt>#sidebar ul ul ul li</tt>是二级列表的样式。如果你有一个拥有子类别的[[WordPress:Glossary#Category|类别]]列表，[[WordPress:Glossary#Category|类别]]标题会是列表的第一级，类别是列表的第二级，或者子子列表，例如下面的例子。一些设计者喜欢将第三级列表的字体设计地小一点，一个不同的bullet或者不同的颜色，以突出第三级列表上的内容：

:*Category Title
:**Category One
:**Category Two
:***Sub-Category One
:***Sub-Category Two
:**Category Three

:*类别标题
:**类别一
:**类别二
:***子类别一
:***子类别二
:**类别三

== Styling Specific List Items ==

==设计特别的列表 Items ==

Do you want your [[WordPress:Glossary#Category|Categories List]] to look different from your Archives List?  Then open up the <tt>index.php</tt> or <tt>sidebar.php</tt> and carefully add the following style references to the appropriate list item:

你希望[[WordPress:Glossary#Category|类别列表]]与你的归档列表看起来不一样吗？打开<tt>index.php</tt>或者<tt>sidebar.php</tt>并且仔细地将下面的样式references添加到合适的列表item中：

<div style="border:1px dashed blue; width:50%; margin: 20px; padding:20px"><tt>&lt;li '''id="categories"'''>&lt;h2>Categories&lt;/h2>.....</tt><br /><br />
<tt>&lt;li '''id="archives"'''>&lt;h2>Archives&lt;/h2>....</tt></div>

<div style="border:1px dashed blue; width:50%; margin: 20px; padding:20px"><tt>&lt;li '''id="categories"'''>&lt;h2>Categories&lt;/h2>.....</tt><br /><br />
<tt>&lt;li '''id="archives"'''>&lt;h2>Archives&lt;/h2>....</tt></div>

To customize the Categories and Archives list, add the following to your stylesheet to customize these individually:

要自定义类别和归档列表，将下面的内容添加到你的样式表上，来一一地自定义这些：

<pre>#categories {attributes}
#categories ul {attributes}
#categories ul li {attributes}
#archives {attributes}
#archives ul {attributes}
#archives ul li {attributes}</pre>

<pre>#类别 {属性}
#类别 ul {属性}
#类别 ul li {属性}
#归档 {属性}
#归档 ul {属性}
#归档ul li {属性}</pre>

Go through any other sections of your list and give them a style reference name and add them to your style sheet.  When you've identified which part of the list controls which aspect of the list, it's time to start changing the look of the list.

检查列表上的其它部分，并且给这些部分样式refernce名称并且将这些添加到样式表上。当你确认了列表了哪个部分控制了列表的哪个方面的时候，就要开始更改列表的外观了。

=== Styling individual items ===

=== 设计个别的items ===

If you want to use image replacement techniques to style your list, each <tt>LI</tt> tag will need its own class or ID.  Try the [http://wordpress.org/extend/plugins/classy-wp-list-pages/ Classy wp_list_pages] plugin.

如果你想要使用图像替换技术来设计列表，每个<tt>LI</tt>标签都需要自己的class或者ID。试试[http://wordpress.org/extend/plugins/classy-wp-list-pages/ Classy wp_list_pages]插件。

== Styling Your Lists ==

An important part of a list is the bullet - an eye catching dot, spot, or graphic that tells viewers "this is a list". The style of bullet or numbering for a list is determined by a '''list-style-type property''' in the style sheet. The default value is <tt>disc</tt>. Other basic values are <tt>circle</tt>, <tt>square</tt>, <tt>decimal</tt>, <tt>decimal-leading-zero</tt>, <tt>lower-roman</tt>, <tt>upper-roman</tt>, and <tt>none</tt>.  Let's change the default value to something else, like a square.

列表的一个重要的部分是bullet-一个吸引眼球的点，点号或者图形，暗示读者"这是个列表"。Bullet的样式或者列表的编号方式取决于样式表中的'''list-style-type 属性'''。默认参数值是<tt>disc</tt>。其它基本的参数值是<tt>circle</tt>, <tt>square</tt>, <tt>decimal</tt>, <tt>decimal-leading-zero</tt>, <tt>lower-roman</tt>, <tt>upper-roman</tt>, 和 <tt>none</tt>。让我们把默认的参数值更改为其它的内容，像一个正方形。

<pre>#sidebar li {
   list-style: square;
}</pre>

<pre>#sidebar li {
   list-style: square;
}</pre>

Instead of typing <tt>list-style-type</tt>, you see a shorthand form of <tt>list-style</tt>, and instead of using the default <tt>disc</tt>, the list now features small squares.

不用输入<tt>list-style-type</tt>，你会看到一种速记形式<tt>list-style</tt>，也不用使用默认的<tt>disc</tt>，列表现在有小的squares。

But not all lists need bullets.  By their overall layout, you just ''know'' a list is a list.  To eliminate the bullet, change the stylesheet to this:
但是并不是所有的列表需要bullets。从整体布局上看，你只会''知道''一个列表是一个列表。要删除bullet，你要将样式表改为：
<pre>#sidebar li {
   list-style: none;
}</pre>

<pre>#sidebar li {
   list-style: none;
}</pre>

Now, anything tagged with <nowiki><li></nowiki>, within the DIV of the ID of <tt>#sidebar</tt>, would have no bullet.  Experiment with different values to see the results you can achieve.

现在<tt>#工具条</tt>ID的DIV内部的任何带有<nowiki><li></nowiki>的标记都没有了bullet。试试不同的参数值，看看你能够得到什么样的结果。

'''HINT:''' In terms of accessibility, an ordered list is easier to navigate than an unordered list.
'''提示:'''对于可访问性方面，一个有序的列表比一个无序的列表更容易访问。

=== Using a Custom Image Instead of a Bullet ===

=== 使用一个自定义图像而不是Bullet ===

Tired of boring bullets? Let's get rid of the boring with a few [[WordPress:Glossary#CSS|CSS]] techniques. In this case, use '''list-style-image''' to instruct the browser to use your bullet image instead of the old boring default bullets.

厌烦了bullets?使用一些[[WordPress:Glossary#CSS|CSS]]方法，去除这些恼人的bullet。在这个例子中，使用'''list-style-image'''指示浏览器使用bullet图像而不是旧的恼人的默认bullets。

Find some interesting bullet graphics and add the following code in your style sheet to add some jazzy bullets to your lists:

找一些有趣的bullet图形并且将下面的代码添加到你的样式表上，给你的列表添加一些有趣的bullets。

<pre>#sidebar ul {
 list-style-image: url(/wp-images/image.gif);
 }</pre>

<pre>#sidebar ul {
 list-style-image: url(/wp-images/image.gif);
 }</pre>

Note that you could also use an absolute link rather than a relative link. Simply change the <tt>url(/wp-images/image.gif )</tt> to <tt><nowiki>url(http://example.com/wp-images/image.gif)</nowiki></tt>.

注意你可以使用一个绝对的链接而不是一个相对的链接。只要将<tt>url(/wp-images/image.gif )</tt>更改为<tt><nowiki>url(http://example.com/wp-images/image.gif)</nowiki></tt>。

===Adding a Border to Your List===

===给你的列表添加一个边框===

To add a border, like an underline, after your title, you can simply add a border style to the top of the <tt>ul</tt> under the title, rather than on the title itself.

要在你的标题后面添加一个边框，像一个下划线，你只要在标题的下面而不是标题的上面的<tt>ul</tt>上，添加一个边框样式，就可以了。

<pre>#sidebar ul ul {...; border-top: solid 1px blue; ....}</pre>

<pre>#sidebar ul ul {...; border-top: solid 1px blue; ....}</pre>

Go a step further and add a whole box around your list with the title sitting atop it:

进一步操作，在你的列表周围加上一个框，将标签置于框的上方。

<pre>#sidebar ul ul {...; border: solid 1px blue; ....}</pre>

<pre>#sidebar ul ul {...; border: solid 1px blue; ....}</pre>

Add a colored background to your list along with its new border:

给你的列表添加一个背景色并且加上新的边框：

<pre>#sidebar ul ul {...; border-top: solid 1px blue;
     background:#CCFFFF; ....}</pre>

<pre>#sidebar ul ul {...; border-top: solid 1px blue;
     background:#CCFFFF; ....}</pre>

And your end result would look like this:
你最后的结果可能看起来像：
<div style="padding: 10px"><span style="font-size:115%; font-style: italic; font-weight:bold; color: navy">Category Title</span>
<div style="width:30%; border: solid 1px blue; background:#CCFFFF; color: blue; padding: 5px">Category One
Category Two
Category Three</div></div>

<div style="padding: 10px"><span style="font-size:115%; font-style: italic; font-weight:bold; color: navy">类别 标题</span>
<div style="width:30%; border: solid 1px blue; background:#CCFFFF; color: blue; padding: 5px">类别 一
类别 二 
类别 三</div></div>

Or really expand the possiblities to something like this:

或者增加可能性：

<div style="width: 30%; border-top: 20px solid #CC6600; border-left: 30px solid #CC6600"><span style="font-size:130%; font-style: italic; font-weight:bold; color: #660000">Category Title</span>
<div style="border-top: solid 5px black; border-left: solid 10px black; background:#FFFF00; color: navy; padding: 5px; font-size: 105%; font-weight: bold">Category One
Category Two
Category Three</div></div>


<div style="width: 30%; border-top: 20px solid #CC6600; border-left: 30px solid #CC6600"><span style="font-size:130%; font-style: italic; font-weight:bold; color: #660000">Category Title</span>


<div style="border-top: solid 5px black; border-left: solid 10px black; background:#FFFF00; color: navy; padding: 5px; font-size: 105%; font-weight: bold">类别 一
类别 二
类别 三</div></div>


You can have a lot of fun with your list bullets and list layouts.  If you are having trouble with your bullets and lists, check out the resources listed below and then visit the [http://wordpress.org/support/ WordPress support forums] to get more help.

你会发现列表bullets和列表布局中有许多乐趣。如果你处理bullets和列表的时候，遇到了麻烦，查看下面列出的资源，然后访问[http://wordpress.org/support/ WordPress s支持论坛]得到更多的帮助。

==Troubleshooting Nested Lists==

==解决嵌套列表问题==

If you are having trouble with your nested lists, the following might provide the solution. Also check [[WordPress:CSS Troubleshooting]] for more styling help issues.

如果你有有关嵌套列表方面的问题，下面可能会提供解决问题的方法。同时查看[[WordPress:CSS Troubleshooting|CSS发现并解决问题]]关于更多的帮助。

===Improper Tag Structure===

===不合适的标签结构===

The number one cause for errors or non-validation within a nested list is the lack of proper list structure. Here is a very simplified and correct nested list layout.  Note that when a new list begins (nested), the <tt>&lt;/li></tt> at the end of the last list item '''is not closed'''.  It is left open until the new nested list is completed, and then closed.

产生错误的最大的问题或者嵌套列表中非确认部分，是由于缺乏合适的列表结构。这里有一个非常简单的而且正确的嵌套列表布局。注意一个新的列表开始（嵌套），最后一个item后的<tt>&lt;/li></tt>'''没有关闭'''。只有新的嵌套列表形成了，这个<tt>&lt;/li></tt>才会关闭。

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



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

===Template Tag Lists===

===模板标签列表===

Different [[WordPress:Template Tags]] used within lists have different ways of using and relying upon list tags.  Some tags automatically include the <tt>UL</tt> and <tt>LI</tt> so all you have to do is include the tag in the list by itself and it will do all the work.  Other tags require the <tt>UL</tt> to be in place followed by the template tag and it generates its own <tt>LI</tt> tags.  Other template tags require designating which type of list tags are needed or use none at all if not listed in the tag's parameters.

这个列表内使用的不同的[[WordPress:Template Tags|模板标签]]，拥有许多不同的方法，使用并且依赖列表标签。一些标签自动地包含<tt>UL</tt> 和<tt>LI</tt>，这样你只要使标签包含在列表中，标签就能够执行所有任务。其它的标签需要<tt>UL</tt>放在模板标签的后面，而产生自身的<tt>LI</tt>标签。其它的模板标签需要指定需要哪种类型的列表标签，或者如果没有列在标签参数中的话，就不使用任何标签。

If you are having trouble with your nested lists when using template tags like [[WordPress:Template Tags/wp_list_cats|wp_list_cats]] or [[WordPress:Template Tags/wp_list_pages|wp_list_pages]], check their paramaters to see how they use the list tags and compare it with your usage.

如果你使用模板标签像[[WordPress:Template Tags/wp_list_cats|wp_list_cats]] 或者 [[WordPress:Template Tags/wp_list_pages|wp_list_pages]]的时候，遇到了有关嵌套列表方面的问题，查看标签的参数，看看参数是怎样使用列表标签，并且将它们的用法与你自己的用法，相比较。

===Parent/Child Relationships===

===母/子关系===

Discussed in [[WordPress:CSS_Troubleshooting#The_CSS_Parent_and_Child_Relationship|The CSS Parent and Child Relationship]], lists are one of the big culprits.  Styles in the child list items are influenced by its "parents".  If the parent's list style features the color "red" and you want the children to be in "blue", then you need to specify the color in the children's list styles to be "blue" so they will override the parent's style

在[[WordPress:CSS_Troubleshooting#The_CSS_Parent_and_Child_Relationship| CSS 母子关系]]中讨论了，列表是最大的问题之一。子列表内容的样式受到"母"列表影响。如果母列表样式的颜色是"红色的"，但是你希望子列表是"蓝色的"，那么你需要在子列表样式中将颜色规定为"蓝色的"，这样子列表样式就能够不顾母列表样式。

Nested lists within the WordPress Sidebar typically contain links.  Therefore, while you can style the list as much as you want, the style for links will override the list style.  You can control the way the links in the list work by giving them a specific style class of their own, including their hover attributes:

WordPress工具条中的嵌套列表通过包含有链接。因此，虽然你可以尽可能地设计列表，链接的样式会超过样式表的样式。通过规定链接一个特定的样式class，你可以控制列表中的链接的显示方式，包含链接的悬停属性：

<pre>#sidebar a {attributes}
#sidebar a:hover {attributes}
#categories a {attributes}
#categories a:hover {attributes}
#archives a {attributes}
#archives a:hover {attributes}</pre>

<pre>#sidebar a {属性}
#sidebar a:hover {属性}
#categories a {属性}
#categories a:hover {属性}
#archives a {属性}
#archives a:hover {属性}</pre>

== Resources ==

== 资源 ==

* [[WordPress:Creating Horizontal Menus]]
* [[WordPress:Dynamic Menu Highlighting]]
* [[WordPress:Customizing Your Sidebar]]
* [[WordPress:Site Architecture 1.5]]
* [[WordPress:Stepping Into Template Tags]]
* [http://www.alistapart.com/articles/taminglists/ Taming Lists]
* [http://css.maxdesign.com.au/listamatic/ Listamatic]
* [http://www.yourhtmlsource.com/stylesheets/csstext.html CSS Text Formatting]
* [http://www.w3.org/TR/REC-CSS2/generate.html W3.org's CSS-2 - Generated Content, Automatic Numbering, and Lists]
* [http://www.davesite.com/webstation/css/chap07.shtml Cascading Style Sheets Interactive Tutorial for Beginners: Lists]
* [http://www.maxdesign.com.au/presentation/definition/index.cfm Max Design's Definition lists - Misused or Misunderstood?]
* [http://www.cameraontheroad.com/?p=160 CSS Unleashed - Experiments with Lists, Menus, Tables of Content, and More]
* [http://www.simplebits.com/notebook/2003/10/19/styling_nested_lists.html Simplebits' Style Nested Lists]














* [[WordPress:Creating Horizontal Menu|创建横向菜单]]
* [[WordPress:Dynamic Menu Highlighting|突出动态菜单]]
* [[WordPress:Customizing Your Sidebar|自定义你的工具条]]
* [[WordPress:Site Architecture 1.5|站点结构1.5]]
* [[WordPress:Stepping Into Template Tags|进入模板标签]]
* [http://www.alistapart.com/articles/taminglists/ Taming 列表]
* [http://css.maxdesign.com.au/listamatic/ Listamatic]
* [http://www.yourhtmlsource.com/stylesheets/csstext.html CSS 文本格式]
* [http://www.w3.org/TR/REC-CSS2/generate.html W3.org's CSS-2 – 产生内容,自动编号, 和列表]
* [http://www.davesite.com/webstation/css/chap07.shtml 针对初学者的层叠式样式表交互学习指南:列表]
* [http://www.maxdesign.com.au/presentation/definition/index.cfm Max Design的定义表- 误用或者误解?]
* [http://www.cameraontheroad.com/?p=160 CSS Unleashed – 体验列表，菜单，表格内容，以及更多的]
* [http://www.simplebits.com/notebook/2003/10/19/styling_nested_lists.html Simplebits的样式嵌套列表]