css - 有没有办法将 CSS 样式应用于同一级别的所有评论？

Question

我有一个分层评论结构，这意味着有多个级别( parent 、 child 、 child 的 child 等)，每个级别有多个评论。

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

我对 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 */ }

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

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