1

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

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

我玩了一下 li:nth-child，但我只设法将其应用于评论本身，而不是应用于关卡。

我的评论结构看起来像这样：

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

3 回答 3

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

像这样，二级和三级评论会继承一级评论风格。您需要用其他值覆盖不需要的属性。如果您不希望这样，请使用“>”选择器语法（直接子级）：

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)。

于 2012-11-11T16:25:15.130 回答
0

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

于 2012-11-11T16:23:56.840 回答
-1

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

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

于 2012-11-11T16:25:21.957 回答