display和visibility对计数器的影响

display: none; 对计数器是有影响的；

如果某一个元素隐藏则该元素不参与计数器的计算

 

visibility: hidden;对计数器是没有影响的

如果某一个元素隐藏则该元素仍然参与计数器的计算

<ol>

    <li>不影响计数器1</li>

    <li class="second-li">不影响计数器2</li>

    <li>不影响计数器3</li>

    <li>不影响计数器4</li>

</ol>

 

<ol>

    <li>影响计数器1</li>

    <li class="li-er">影响计数器2</li>

    <li>影响计数器3</li>

    <li>影响计数器4</li>

</ol>

 

<style type="text/css">

    ol{

            background-color: mistyrose;

            margin-top: 10px;

    }

    .second-li{

            visibility: hidden;

    }

    .li-er{

            display: none;

    }

</style>