我有以下列表:
<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吗?
答案 0 :(得分:6)
是的,只需display
到block
,这样该项目就不会显示为列表项目,因此也会从编号中排除。
.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;
}
答案 3 :(得分:1)
我偶然发现了一个简单的解决方案。使用以下CSS
.caption {
display: block; /* default for list items would be "display: list-item;" */
}
似乎从编号中排除了该项目。在FF 33,Chrome 38和IE 11中测试。
感谢其他答案,但这似乎是最简单的解决方案。有什么问题吗?如果不是,我会接受它作为答案。