問題タブ [css-counter]

を使用して、ネストされた関連トピック/サブトピックのセットがあります<ol>。私がこれまで持っている CSS は、ツリーの一番上からうまく機能しますが、ユーザーはサブトピックをクリックすることができ<ol>ます。ユーザーがクリックした場所から、入れ子になった のセットを再描画しています。私の問題は、章番号などを尊重する必要があることです。

したがって、典型的な構造がこれである場合：

ユーザーが をクリックすると1.1 Street、次のように表示する必要があります。

私がこれまでに持っているCSSはこれです：

秒カウンターでいくつかのバリエーションを試しましたが、ダイスはありません! この問題を複雑にしているのは、ツリーが無限に深くなる可能性があるため、ハードコードされたソリューションは存在しません。ありがとう！

次のようなリスト スタイルが必要です ( jsfiddle ):

ご覧のとおり、リストのスタイルは次のとおりです。

1. CSS によって提供されるスタイルの 1 つではない、つまりカスタムメイドのスタイル
2. <li>規則的です。つまり、 sに 1、2、3 などの値を手動で入力する必要はありません。したがって、 が 4 つある場合<li>、値として 1、2、3、4 を持つ 4 つの緑色の円が自動的に配置されます。

質問：

このタスクを達成するにはどうすればよいですか?

レジスターと呼ばれる特定の種類の系図レポートの順序付きリストを作成する必要があります。レジスタでは、すべての子は小文字のローマ数字で番号付けされ、子孫を持つ子も次のようにアラビア数字になります。

このフィドルでの私の最初の試みを見ることができます: https://jsfiddle.net/ericstoltz/gpqf0Ltu/

問題は、アラビア数字が世代から世代へと連続している必要があることです。フィドルを見ると、アラビア数字の場合、2 番目の世代が 1 から始まることがわかりますが、2 で始まる必要があります。これは、1 の子供としてその人に割り当てられた番号であり、子孫を持つ 2 の子供の最初の番号であるためです。 5 ではなく 4 です。そのため、より一貫性を持たせる必要がある場合、カウンターは部分的な方法で 2 番目のリストに進みます。

明確にするために、これは連番だけではありません。子孫を持つ各人は固有の番号で識別され、その番号は 2 回表示されます: その人を子として、その人を親として。

見出しのために世代を分ける必要があり、時にはそれらの間に物語があります.

私は非常に近いと感じており、これを機能させるために何かを見落としているだけです!

更新: 解決済み。2 つのカウンターでこれを行う方法については、フィドルを参照してください。

私の目的は、テキスト ファイルを 1 行ずつ印刷し、先頭に行番号を追加することです。そのようです：

n親内および子セレクター内で要素のインデックスを担当する CSS の変数です。たとえば、それに対して操作を実行できます。nth-child(2n + 3)

この変数を取得してプレーンテキストとして挿入する方法はありますか? 基本的には次のようになります。

私が使用しているSASSでこれを達成できることはわかっていますが、バニラCSSでそれを実現する方法があるかどうか疑問に思っていました.

テーブルの行に行番号を追加するために、以下の CSS コードを使用しました。

しかし、それは10行目の直後にコンテンツが整列していません。下の画像を参照してください。

しかし、私はこのようなものが欲しい:

私も追加しようとpaddingしましたが、それは実用的な解決策ではありません。

これをどのように修正しますか？

これが私のフィドルです。

カウンターインクリメントプロパティを使用してリストを注文しました。長いテキストが複数の行に分割されている場合、左から最初の行と同じオフセットを持たせるにはどうすればよいですか? これで、2 行目が数字の下に表示されます。

これがフィドルです（2.3アイテムを見てください）： http://jsfiddle.net/1vh1tt81/1/

「li:before」要素で「position: absolute」を使用して目的の結果を得ることができましたが、それが私のプロジェクトに固有の他の問題を引き起こしたため、これは私にとって良い解決策ではありません。

同様の質問がありましたが、マークアップにはタグが追加されていましたが、追加のタグはありません: https://jsfiddle.net/rkmv3rn3/10/

CSS カウンターを使用して見出しにセクション番号を追加する通常の方法を使用すると、headerタグの使用時に問題が発生します。

counterどういうわけか（s）に干渉しているようです

出力は次のとおりです。

• 最初の章
• 1.1。サブチャプター
• 1.1。サブチャプター
• 1.1。サブチャプター
• 1.0.1。サブサブセクション

headerタグを削除した後output is as expected:

• 1. 最初の章
• 1.1。サブチャプター
• 1.2. サブチャプター
• 1.3。サブチャプター
• 1.3.1. サブサブセクション

headerH1 付近のタグを使用すると、この結果になるかどうか。Chrome と Opera ではなく、Firefox と Edge でそうします

次のテキストを html と css で再作成したい:

これまでのところ、css なしで、html で書きました。

1しかし、元の画像のように残りのテキストを分割するにはどうすればよいですか?