从编号中排除单个列表项

时间:2014-11-13 08:22:07

标签: html css list

我有以下列表:

<ol>
   <li class="caption">Caption</li>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

我想第一个没有任何数字的li和第二个以数字1开头的项目。这可以通过使用CSS吗?

4 个答案:

答案 0 :(得分:6)

是的,只需displayblock,这样该项目就不会显示为列表项目,因此也会从编号中排除。

.caption { display: block; }
<ol>
   <li class="caption">Caption</li>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

答案 1 :(得分:2)

尝试以下代码

ol{list-style:none;}
ol {
        counter-reset:yourCounter;
 }
ol li:not(.caption) {
  counter-increment:yourCounter;
  list-style:none;
}
ol li:not(.caption):before {
  content:counter(yourCounter) ".";
}
ol li.caption:before {
  content:""; 
}
Try following code

<ol>
   <li class="caption">Caption</li>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

答案 2 :(得分:1)

你可以使用像这样的CSS计数器

ol {
  list-style: none;
  counter-reset: index;
}

li + li {  
   counter-increment: index; 
}

li + li:before {
   content : counter(index);
   padding-right: .5em;
}

示例:http://codepen.io/anon/pen/ogNLBw

答案 3 :(得分:1)

我偶然发现了一个简单的解决方案。使用以下CSS

.caption {
  display: block; /* default for list items would be "display: list-item;" */
}

似乎从编号中排除了该项目。在FF 33,Chrome 38和IE 11中测试。

感谢其他答案,但这似乎是最简单的解决方案。有什么问题吗?如果不是,我会接受它作为答案。