嵌套ul li注释的CSS选择器

Question

所以，我已经得到了我的Wordpress评论模板：

<ul class="children">
    <li class="comment bypostauthor">
        <span class="name">MYNAME</span>
        My comment
        <ul class="children">
            <li class="comment">
                <span class="name">ANOTHER USER NAME</span>
                user nested comment
                <ul class="children">
                    <li class="comment bypostauthor">
                        <span class="name">MYNAME</span>
                        My nested answer
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我的CSS：

<style>
.comment .name {color:red;}
.bypostauthor .name {color:blue;}
</style>

我喜欢使用其他注释的不同颜色来设置.bypostauthor .name，但由于我使用嵌套注释，因此第一个.bypostauthor中的每个.name都会变为蓝色。

我试图想出一个CSS选择器，但没有运气:(

示例：http://jsfiddle.net/a23jX/

有没有这样做？

Answer 1

试试这个：

<style>
.comment .name {color:red;}
.bypostauthor > .name {color:blue;}
</style>

>仅选择直接子女。

Answer 2

使用子选择器>

<style>
    .comment > .name {color:red;}
    .bypostauthor > .name {color:blue;}
</style>

---

示例： http://jsfiddle.net/a23jX/1/

---

http://www.w3.org/TR/CSS2/selector.html#child-selectors

  

当元素是某个元素的子元素时，子选择器匹配。   子选择器由两个或多个由“＆gt;”分隔的选择器组成。