WordPress 2.7评论CSS解惑

WordPress 2.7内置了threaded comment，评论的class name也变得非常繁杂。Betty给出了一张WordPress 2.7 评论结构一览图，但是我想许多人大概还不知道某些class name的规则是什么样的。

这里只说每条评论上添加的class name，总结一下，有这么多：

comment, trackback, pingback, 这三个不用多说，用来区分评论类型，方便用CSS样式来区分不同类型的。它们互相排斥，所以要想三个有统一的样式，就得这么写规则：

[code lang=’css’]ol.commentlist li.comment, ol.commentlist li.pingback, ol.commentlist li.trackback {
…
}[/code]

byuser, comment-author-*, bypostauthor. 如果评论者是注册用户，会加上byuser和”comment-author-[nickname]“两个类，这样可以区分注册用户与非注册用户，甚至可以根据用户的不同呈现不同的样式。如果评论者是文章的作者，还会加上一个bypostauthor，这个最重要，很多blog用来突出显示文章作者的评论。

odd, alt, even. 评论的交替样式。评论从0开始计数，奇数时是odd, alt，偶数时是even. 注意，odd和alt两个类必然同时存在。一般情况下，根据odd, even来写CSS，另一种方式是根据有无alt这个类来写，两种方式选择其一即可。还要注意计数的顺序是按照“前序遍历”，具体可参考文章“WordPress 2.7自定义单条评论结构”中的图片。因此你不能保证这个thread（顶级评论）是奇数，下一个thread就是偶数。

thread-odd, thread-alt, thread-even. 和odd, alt, even类似，不过只计顶层评论。

depth-[number]. 表示评论嵌套的深度，顶层评论的class是depth-1，向下递增。可以根据这个调整输入框大小，以我的为例：

[code lang=’css’]#comment {
width: 530px;
border: 1px solid #C4EF95;
font-size: 12px;
}
.depth-1 #comment {
width: 470px;
}
.depth-2 #comment {
width: 410px;
}
.depth-3 #comment {
width: 350px;
}[/code]

parent, 有回复的评论会加上这个class.

应该就是这些。

最后我想说，要是再有两个depth-odd, depth-even就好了。我想实现的效果是顶层评论背景色交替，每个thread里面不同深度的嵌套回复背景色也要交替。没有这两个类，我就只好用depth-1, depth-2裸写，写到我限制的深度就行了。有兴趣的可以看看我的style.css.

以上的逻辑查看wp-includes/comment-template.php即可得知，关键是get_comment_class函数。