时间戳

首页 > 解决方案 > ol 启动功能不适用于我的 CSS

html - ol 启动功能不适用于我的 CSS

问题描述

我正在尝试使用连续编号开始一个新列表。但是当我使用 css 自定义数字时，启动功能停止工作。我正在使用从 5 开始的新列表。

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
ol li {
  counter-increment: my-awesome-counter;
    padding: 0 0 1em 0;
}
ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: #be1e2d;
  font-weight: bold;
  margin-left:-1em;
        
}
<div class="row">
  <div class="columns large-6">
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>
    </div>
  <div class="columns large-6">
<ol start="5">
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ol>
    </div>
</div>

标签： htmlcss

解决方案

div.row {
  counter-reset: my-awesome-counter;
}
ol {
  list-style: none;
}
ol li {
  counter-increment: my-awesome-counter;
    padding: 0 0 1em 0;
}
ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: #be1e2d;
  font-weight: bold;
  margin-left:-1em;
        
}
<div class="row">
  <div class="columns large-6">
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>
    </div>
  <div class="columns large-6">
<ol start="5">
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ol>
    </div>
</div>

您的 CSS 会使用每个<ol>. 改变它可以解决问题。

推荐阅读