用于嵌套 ul li 注释的 CSS 选择器答案

【问题标题】：CSS selector for nested ul li comments用于嵌套 ul li 注释的 CSS 选择器
【发布时间】：2014-01-28 14:54:05
【问题描述】：

所以，我的 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>

我想用与其他 cmets 不同的颜色来设置 .bypostauthor .name 的样式，但由于我使用的是嵌套 cmets，所以第一个 .bypostauthor 中的每个 .name 都会变成蓝色。

我正在尝试提出一个 CSS 选择器，但没有运气:(

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

有没有办法做到这一点？

【问题讨论】：

标签： css wordpress nested comments selector

【解决方案1】：

试试这个：

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

> 只选择直接子代。

【讨论】：

【解决方案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

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

【讨论】：