关于主题嵌套评论的设计
这两天制作新的Retweet主题，除了在后台功能设定做了一些工作比较繁琐，另一个头疼的问题就是评论样式的制作。Wordpress功能丰富，每个人习惯不同设定不同，从而显示效果就不同。设计的效果用户可能不用，用户的设定可能又体现不出设计的样式。这个就很纠结，所以我已经抱着凑合着用的心态来制作诸如“嵌套评论”这样的地方。而说到“嵌套评论”，那就谈谈这几天制作用到的一些设计。
WordPress更新到2.7后，采用了新的函数wp_list_comments来调取评论列表。我们制作主题的时候可能希望自己修改评论样式，在function.php设定评论样式然后在comment.php中用callback来调出样式。而这时我们需要注意一个问题，就是在function.php设定评论样式时，不要在最后添上</li>来闭合前面的<li>。
为什么这么做呢？
- 如果在这里闭合<li>，那么当该评论有嵌套评论时，代码会像下面这样。
区别在哪？
在IE里，在<ul>前面是否闭合是看不出区别的。但在其他浏览器中譬如火狐，<ul>的部分则是显示在<li>下面的而不是里面。如下所示，使用:hover在IE中（图一）整个<li>都会被选中，效果等同于<ul>包在<li>里面，而在Firefox里面（图二）使用:hover只选中了当前<li>，下面的<ul>好像没有关系。（图示不是很明了，如果使用border作示范效果应该更好 😛 ）
可以简单的说：如果嵌套评论的ul在闭合的li后面，这个li在火狐中是无法包住ul的，而在IE中可以。
我记得以前看的一些主题自定义评论最后都没有闭合</li>，可能因为我们学习的教程就不小心遗留下了最后的</li>，所以就让IE的这个bug影响设计。
如果没法改HTML的部分，又要分开定义各层嵌套回复的样式怎么办？
如果遇到这个问题我们又不能自己修改主题，怎么办？也不麻烦，我们可以通过CSS里的高级选择器（P.S.该功能IE6不支持）来实现。
使用相邻同胞选择器（adjacent sibling selector）：由于现在<li>跟<ul>平级了，<ul>在<li>后面而<li>又没有包住<ul>，我们可以使用相邻同胞选择器给<li>后面紧跟着的第一个<ul>赋予样式。用法是在li跟ul的类中用“+”连接，如“li.depth-1 + ul.children li.depth-2”。这样就给li.depth-1后面的第一个类名为children的ul赋予样式。这个代码也有缺点，如果楼层比较清晰一层一层顺着下去还好。如果有人插楼，一层回了好几个评论样式就乱了。该选择器可用来定义第一层的嵌套回复（即首层回复），从第二层的回复开始的我们就可以用“ul.commentlist ul.children ul.children li.depth-3”这样赋予样式了。
使用子选择器（child selector）：使用子选择器可以避免相邻同胞选择器只能给第一个合适的ul定义样式的问题。如“ul.commentlist > ul.children”这样可以给所有跟“li.depth-1”一层的嵌套评论都赋予样式。不过使用子选择器也是只能针对一层设定样式，再往里还要依次进行设置。
当然，一般独立假设WP的朋友不会遇到这种问题，只需要注意前面说的闭合li的问题，让页面输出一种IE跟火狐识别效果一样的HTML代码就好了。
如果这里不闭合<li>，那么代码如下