1

私は階層的なコメント構造を持っています。つまり、複数のレベル (親、子、子の子など) があり、各レベルに複数のコメントがあります。

2 つおきのレベル (コメントではない) の背景を何らかの色に設定したいと思います。つまり、同じレベルのすべてのコメントは同じ色ですが、上下のレベルのコメントは 2 つ目の別の色になります。

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

このように、第 2 レベルと第 3 レベルのコメントは、第 1 レベルのコメント スタイルを継承します。不要なプロパティを他の値で上書きする必要があります。それを望まない場合は、'>' セレクター構文 (の直接の子) を使用します。

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} などを使用して、すべての項目の div コンテナーに CSS を配置することもできます。など。

于 2012-11-11T16:23:56.840 に答える
-1

はい、これは nth-child で非常に実行可能です。混乱を招く可能性があるため、私が使用する優れたツールを次に示します。

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

于 2012-11-11T16:25:21.957 に答える