javascript - IE 7 中没有列表的嵌套 CSS 计数器

Question

我有以下 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 一样，它们重置了哪些计数器以及它们具有哪些列表样式类型)。有更好/更简单的方法吗？如果没有，我如何在不自己实现的情况下使用像“lower-roman”这样的反样式？
注意:可以使用 jQuery 1.6.2。

Answer 1

首先，您的 HTML 无效。 paraclass属性必须重命名为 data-paraclass如果您使用 HTML 5 进行开发，或者如果您使用 XHTML 进行开发，则添加命名空间。

二、<p>元素不被认为显示为列表。因此，我想鼓励您使用 <ol>元素，因为它专为此目的而设计，并受到所有浏览器的支持。