Html 更改有序列表的起始编号(ol)

Html 更改有序列表的起始编号(ol),html,css,list,html-lists,Html,Css,List,Html Lists,我想知道如何用不同的数字开始我的ol,比如4。我尝试过使用start=“4”,尝试过向ol添加一个类,并设置计数器重置:4但这一切似乎都不起作用。号码没有变 我已经尝试删除所有样式,将其放回普通的ol列表,但仍然不起作用。有人能告诉我哪里出了问题吗 我只希望第二个列表中的数字以4开头 HTML <div class="row"> <div class="col-md-6">

我想知道如何用不同的数字开始我的
ol
,比如4。我尝试过使用
start=“4”
,尝试过向
ol
添加一个类,并设置
计数器重置: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>

您的
ol
上的
列表样式类型设置为
none

.number-circles {
   margin: 40px 0 0 0;
   padding: 0;
   list-style-type: none;
}
start
属性不会产生任何影响,因为该值将被隐藏

列表样式类型
属性指定列表项的外观 元素

未显示任何项目标记

资料来源:


您的
ol
上的
列表样式类型设置为
none

.number-circles {
   margin: 40px 0 0 0;
   padding: 0;
   list-style-type: none;
}
start
属性不会产生任何影响,因为该值将被隐藏

列表样式类型
属性指定列表项的外观 元素

未显示任何项目标记

资料来源:


您没有名为“item”的计数器。您需要更改:

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

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


在这里查看-

您没有名为“item”的计数器。您需要更改:

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

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


查看这里-

Start适用于我-相关-这对我的示例不起作用,但我无法让它适用于我的ol,我已经尝试过了。尝试简化演示…目前很难理解问题。Start适用于我-相关-这对我的示例不起作用,但我无法让它适用于我的ol,我已经试过了。试着简化演示…现在很难理解这个问题。