0

私は次のHTMLコード構造（例）を持っています：

<p paraclass="M">Some Text</p>
<p paraclass="A1">enum 1</p>
<p paraclass="A1">enum 2</p>
<p paraclass="A2">enum 2.1</p>
<p paraclass="A2">enum 2.2</p>
<p paraclass="A1">enum 3</p>

次のようにレンダリングする必要があります。

Some Text
1 enum 1
2 enum 2
   2.1 enum 2.1
   2.2 enum 2.2
3 enum 3

これはCSSでうまく機能します-次のような疑似タグ：

p[paraclass="A1"]:before{
   content:counter(A1);
   counter-increment:A1;
   counter-reset: A2;
 }

残念ながら、これはIE7では機能しません。
HTMLを変更せずにIE7でこれを機能させるための良い解決策は何ですか？
JSソリューションの場合、必要なカウンターに関するすべての情報があります（ID、リセットされるカウンター、リストスタイルタイプなど）。より良い/より簡単な方法はありますか？そうでない場合は、自分で実装せずに「ローワーローマン」のようなカウンタースタイルを使用するにはどうすればよいですか？
注：jQuery1.6.2を使用できます。

4

1 に答える 1

2

まず、あなたの HTML は有効ではありません。HTML 5 で開発している場合は、paraclass属性の名前をdata-paraclassに変更する必要があります。XHTML で開発している場合は、名前空間を追加する必要があります。

第二に、<p>要素はリストとして表示されるとは考えられていません。<ol>したがって、この要素はこの目的のために特別に設計されており、すべてのブラウザーでサポートされているため、この要素を使用することをお勧めします。

于 2012-09-26T10:21:25.297 に答える