我想知道如何以另一个数字开头我的ol,例如4。我尝试使用start="4",并且尝试将类添加到ol并设置counter-reset: 4;,但是这些似乎都没有工作。该数字不变。

我试图删除所有样式,以将其放回到普通的ol列表中,但仍然无法正常工作。有人可以告诉我我要去哪里了吗?

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

JSFIDDLE

的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; }

最佳答案

您已将list-style-type设置为none

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


ol属性没有任何区别,因为该值将被隐藏。


  start
  
  list-style-type属性指定列表项的外观
  元件。
  
  list-style-type
  
  没有显示项目标记。
  
  来源:https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

10-05 20:39
查看更多