Question

我有一个分层的评论结构，这意味着有多个级别（父级，小孩，孩子的孩子等），每个级别有多个评论。

我想将每个第二级（不是评论）的背景设置为某种颜色。这意味着：同一级别的所有注释都具有相同的颜色，但上下级别的注释都有不同的颜色。

我和li：nth-child玩了一下，但我只是设法将它应用于评论本身，而不是等级。

我的评论结构看起来很喜欢这个：

<ul class="tree-block">
  <li>
  <li>
   <div class="comment">
   <ul>
    <li>
     <div class="comment">
     <ul>
      <li>
       <div class="comment">
       <ul>
        <li>

Answer 1

div.tree-block .comment { /* first level */ }
div.tree-block .comment .comment { /* second level */ }
div.tree-block .comment .comment .comment { /* third level */ }

像这样，第二级和第三级注释将继承第一级注释样式。您需要使用其他值覆盖不需要的属性。如果您不想这样，请使用'＆gt;'选择器语法（直接子）：

div.tree-block > ul > li > .comment { /* first level */ }
div.tree-block > ul > li > .comment > ul > li > .comment { /* second level */ }
div.tree-block > ul > li > .comment > ul > li > .comment > ul > li > .comment { /* third level */ }

我不知道通常为每个奇数/偶数级别创建规则的方法，但是你可以硬编码这些直到你达到一个合理的深度，这可能永远不会发生（我见过的线程数不超过10评论，可能只在reddit：D）。

Answer 2

使用#comment {value1，value2，value3，...}将css应用为自己的编码，您也可以使用#treeblock {value1，value2，value3将css放置到所有项目的div容器中等等。

Answer 3

是的，这对于nth-child非常可行。这是我使用的一个很棒的工具，因为它会让人感到困惑：

http://css-tricks.com/examples/nth-child-tester/

有没有办法将CSS样式应用于同一级别的所有注释？

3 个答案: