html - 阿拉伯语的有序列表不起作用

Question

我需要按顺序在订单列表中显示数据。示例 1、2、3、3.1、3.2、4……

当我使用以下 CSS 时，它会以正确的英文顺序显示目录，如果我必须用阿拉伯语显示类似的内容，那么它在阿拉伯语中不起作用。当我使用它时它显示阿拉伯数字，ul但后来我失去了格式3.1, 3.2....

ol li:before { content: counters(item, ".") " "; counter-increment: item; font-weight:bold; }

如何格式化订单列表以将有序列表中的目录显示为

1. 1
2. 2
3. 3
4. 3.1
5. 3.2
6. 3.3
7. 4
8. 5

https://jsfiddle.net/rkmv3rn3/

Answer 1

的编号ol实际上是使用计数器而不是默认列表样式完成的。因此，计数器的编号样式应设置为arabic-indic（无前缀版本）而不是list-style-type.

代码片段的关键部分是我们设置样式的下面一行。计数器函数中的第三个参数是编号的样式（第一个是计数器名称，第二个是分隔符）。

content: counters(item, ".", arabic-indic)" ";

ul {
  direction: rtl;
  list-style-type: arabic-indic;
}
.handbook-page ol {
  color: #687074;
  counter-reset: item;
}
ol {
  list-style-type: arabic-indic;
  direction: rtl;
  counter-reset: item;
  color: #687074;
}
ol li {
  display: block;
  padding: 5px 0;
}
ol li a {
  text-decoration: none;
  color: #687074;
  padding-left: 10px;
}
ol li:before {
  content: counters(item, ".", arabic-indic)" ";
  counter-increment: item;
  font-weight: bold;
}

<div>
  <ul>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
  </ul>
</div>
<h1>LIST OL </h1>
<div class="page-content">
  <ol>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <ol>
      <li><a href="#home">Sub menu</a>
      </li>
      <li><a href="#news">Sub menu</a>
      </li>
      <li><a href="#contact">Sub menu</a>
      </li>
      <li><a href="#about">Sub menu</a>
      </li>
    </ol>
    <li><a href="#about">About</a>
    </li>
  </ol>
</div>
<h1>LIST UL </h1>
<div class="page-ul">
  <ul>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <ul>
      <li><a href="#home">Sub menu</a>
      </li>
      <li><a href="#news">Sub menu</a>
      </li>
      <li><a href="#contact">Sub menu</a>
      </li>
      <li><a href="#about">Sub menu</a>
      </li>
    </ul>
    <li><a href="#about">About</a>
    </li>
  </ul>
</div>

---

为了将输出显示为 1.3, 2.3, 3.3 阿拉伯语而不是 3.1, 3.2, 3.3 （对于 third 的子项li），似乎不能使用自嵌套计数器，因为数字总是被附加而不是添加在前面。如果需要，我们必须为 lis 的每个级别使用不同的计数器，然后像下面的代码片段一样在前面手动添加子计数器的值。

ul {
  direction: rtl;
  list-style-type: arabic-indic;
}
.page-content > ol {
  direction: rtl;
  counter-reset: item-level1, item-level2;
  color: #687074;
}
.page-content > ol > ol{
  direction: rtl;
  counter-reset: item-level2;
  color: #687074;
}
ol li {
  display: block;
  padding: 5px 0;
}
.page-content > ol li{
  counter-increment: item-level1;
}
.page-content > ol > ol li{
  counter-increment: item-level2;
}
ol li a {
  text-decoration: none;
  color: #687074;
  padding-left: 10px;
}
ol li:before {
  content: counter(item-level1, arabic-indic)" ";
  font-weight: bold;
}
ol ol li:before {
  content: counter(item-level2, arabic-indic) "." counter(item-level1, arabic-indic)" ";
  font-weight: bold;
}

<div>
  <ul>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
  </ul>
</div>
<h1>LIST OL </h1>
<div class="page-content">
  <ol>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <ol>
      <li><a href="#home">Sub menu</a>
      </li>
      <li><a href="#news">Sub menu</a>
      </li>
      <li><a href="#contact">Sub menu</a>
      </li>
      <li><a href="#about">Sub menu</a>
      </li>
    </ol>
    <li><a href="#about">About</a>
    </li>
  </ol>
</div>
<h1>LIST UL </h1>
<div class="page-ul">
  <ul>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <ul>
      <li><a href="#home">Sub menu</a>
      </li>
      <li><a href="#news">Sub menu</a>
      </li>
      <li><a href="#contact">Sub menu</a>
      </li>
      <li><a href="#about">Sub menu</a>
      </li>
    </ul>
    <li><a href="#about">About</a>
    </li>
  </ul>
</div>