Question

我想知道如何使用不同的数字启动ol，例如4.我尝试使用start="4"并尝试在ol中添加一个类并设置counter-reset: 4;但这似乎都不起作用。这个数字没有变化。

我试图删除所有样式，将其直接放回普通ol列表，但它仍然无法正常工作。有人可以告诉我哪里出错了吗？

我只想让第二个列表让红色圆圈中的数字以4开头。

HTML

<div class="row">
                        <div class="col-md-6">
                             <ol class="number-circles">
                           <li value="7"><div class="ol-block"><div class="blue-heading">Title 1</div>
                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
                           </li>
                            <li><div class="ol-block"><div class="blue-heading">Title 2</div>
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
                           </li>
                           <li><div class="ol-block"><div class="blue-heading">Title 3</div>
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
                           </li>

                        </ol>
                        </div>
                        <div class="col-md-6">
                             <ol class="number-circles four">

                            <li><div class="ol-block"><div class="blue-heading">Title 4</div>
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
                           </li>
                            <li><div class="ol-block"><div class="blue-heading">Title 5</div>
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
                           </li>
                        </ol>
                        </div>
                    </div>

CSS

.col-md-6 {

   float: left;
  width: 50%;

}
.number-circles {
  margin: 40px 0 0 0;
  padding: 0;
  list-style-type: none;
}

  .blue-heading {
      color: red;
      font-weight: 600;
      margin-bottom: 5px;
  }

  li {
  counter-increment: step-counter;
  margin-bottom: 40px;

}

 .number-circles li::before {
          content: counter(step-counter);
          margin-right: 15px;
          font-size: 17px;
          background-color: red;
          border: solid 6px yellow;
          color: white;
          font-weight: bold;
          border-radius: 50%;
          height: 40px;
          display: inline-block;
          width: 40px;
          height: 40px;
          padding: 2px 8px;
          text-align: center;
          float: left;
    }

   .ol-block {
        float: left;
        display: inline-block;
        width: 85%;
        margin-bottom: 20px;
    }



ol.four { counter-reset: item 2; }

Answer 1

您[HttpPost] [Authorize] [ValidateAntiForgeryToken] public async Task<ActionResult> Register(RegisterViewModel model) { if (ModelState.IsValid) { var user = new ApplicationUser() { UserName = model.UserName,Name=model.Name }; var result = await UserManager.CreateAsync(user, model.Password); if (result.Succeeded) { //await SignInAsync(user, isPersistent: false); return RedirectToAction("Index", "Home"); } else { AddErrors(result); } } // If we got this far, something failed, redisplay form return View(model); }上的list-style-type设置为none。

ol

.number-circles { margin: 40px 0 0 0; padding: 0; list-style-type: none; }属性不会有所作为，因为该值将被隐藏。

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

start属性指定列表项的外观   元件。

<强> list-style-type

未显示任何项目标记。

_{来源：{{3}}}

Answer 2

您没有名为“item”的计数器。你需要改变：

ol.four {counter-reset: item 2}

为：

ol.four {counter-reset: step-counter 3}

步进计数器的值为0，因此设置值为3将显示4

请在此处查看 - JSFiddle

更改有序列表的起始编号（ol）

2 个答案: