32

假设我有一个简单的列表，如下所示：

<ol>
    <li class="count">one</li>
    <li class="count">two</li>
    <li class="count">three</li>
    <li class="count">four</li>
    <li>blabla</li>
    <li class="count">five</li>
    <li class="count">six</li>
    <li>blabla</li>
    <li class="count">seven</li>
</ol>

现在我只想用“count”类对列表项进行编号

所以如果我添加CSS：

li {
    list-style-type: decimal;
}

然后删除没有类的列表项的列表样式类型：

li:not(.count) {
    list-style-type: none;
}

我明白了：

小提琴

li {
  list-style-type: decimal;
}
li:not(.count) {
  list-style-type: none;
}
<ol>
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ol>

这里明显的问题是没有类的列表项也在这里“计数”，只是没有显示。

所以在上面的例子中，列表应该编号为 7 - 编号跳过没有类的列表项。这可以用 CSS 完成吗？

4

7 回答 7

34

这可以通过CSS 计数器来完成

如果我display:none用计数器设置生成的内容，计数器会跳过它，并继续下一个项目！

小提琴

（编辑：或者，或者 - 正如其他人所指出的那样 - 我们可以只在具有特定类的元素上增加计数器 -就像这样）

ol {
  counter-reset: count;
  list-style-type: none;
  padding-left: 30px;
}
li:before {
  content: counter(count)".";
  counter-increment: count;
}
li:not(.count) {
  padding-left: 13px;
}
li:not(.count):before {
  display: none;
}
<ol>
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ol>

所以实际上，有了计数器，我们不仅可以计算类，还可以计算任何选择器组合。

这是概念证明的示例：

html {
  counter-reset: divs;
}
body {
  counter-reset: paragraphs;
  position: relative;
}
div {
  counter-increment: divs;
}
.wpr {
  counter-reset: count-me;
  position: relative;
}
.container {
  position: relative;
  border-bottom: 1px solid green;
}
.container .count-me {
  counter-increment: count-me;
}
.container p {
  counter-increment: paragraphs;
}
.wpr:after {
  content: "Number of count-me classes in container:" counter(count-me);
  position: absolute;
  bottom: -20px;
}
.container:after {
  content: "Number of paragraphs:" counter(paragraphs);
  position: absolute;
  bottom: -40px;
}
body:after {
  content: "Number of divs:" counter(divs);
  position: absolute;
  bottom: -60px;
}
<div class="wpr">div1
  <div class="container">div2
    <div>div3
      <span class="count-me">count-me</span>
    </div>
    <div>div4
      <span class="count-me">count-me</span>
      <p>I"m a paragragh</p>
    </div>
    <div>div5
      <p>I"m a paragragh</p>
    </div>
    <div>div6
      <span class="count-me">count-me</span>
    </div>
    <div>div7
      <span class="count-me">count-me</span>
      <p>I"m a paragragh</p>
    </div>
    <div>div8</div>
  </div>
</div>

于 2014-11-10T10:42:55.257 回答
9

给予display: block没有.count阶级的 li 元素也是有效的。

ul {
    list-style-type:decimal;
    padding-left: 30px;
}
li:not(.count) {
    display: block;
}

工作小提琴

对于旧版浏览器：

ul {
    list-style-type:decimal;
    padding-left: 30px;
}
li {
    display: block;
}
li.count {
    display: list-item;
}

工作小提琴

另一种方式，如果您打算更改所有li元素的显示状态，请使用:after/:before伪类与显示作为列表项。

工作小提琴

于 2014-11-10T10:52:20.690 回答
3 
li {
    list-style-type: decimal;
}

li:not(.count) {
      -webkit-appearance: textfield;
      -moz-appearance: textfield;
      appearance: textfield;
}

这是一个简单的黑客http://jsfiddle.net/9w9vkcf3/1/

该appearance属性用于使用基于用户操作系统主题的平台原生样式显示元素。资源

于 2015-04-25T15:55:45.103 回答
3

您可以使用 HTML 专门设置列表项的值：

<ul>
    <li class="count">one</li>
    <li class="count">two</li>
    <li class="count">three</li>
    <li class="count">four</li>
    <li>blabla</li>
    <li value="5" class="count">five</li>
    <li class="count">six</li>
    <li>blabla</li>
    <li value="7" class="count">seven</li>
</ul>

http://jsfiddle.net/03bu5sct/1/

如果您想要一个纯 CSS 解决方案，您可能还想查看 CSS3 计数器。

于 2014-11-10T10:49:47.767 回答
3

CSS 2.1 规范中的计数器部分包含如何实现自定义计数器的各种示例。这是一个非常简单的示例，您可以：

  1. 定义一个计数器变量
  2. 为特定元素增加它（在你的情况下它是.count元素）
  3. 在伪元素中显示它

.custom-counter {
  /* define a counter variable */
  counter-reset: clumsycount 0;
  /* style */
  list-style-type: none;
}
.custom-counter .count {
  /* increment the counter variable */
  counter-increment: clumsycount 1;
  /* style */
  position: relative;
  background-color: #EEE;
}
.custom-counter .count:before {
  /* display the counter variable */
  content: counter(clumsycount) ".";
  /* style */
  position: absolute;
  top: 0;
  right: 100%;
  padding-right: .25em;
  background-color: #CCC;
}
<ul class="custom-counter">
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ul>

于 2014-11-10T17:22:59.123 回答
1

一种解决方案是使用CSS 计数器并使用伪元素应用它：在使用计数器获取内容属性之前，

计数器可以用两个不同的函数指定：“counter()”或“counters()”。前者有两种形式：'counter(name)' 或'counter(name, style)'。生成的文本是该伪元素范围内给定名称的最内层计数器的值；它以指定的样式格式化（默认为“十进制”）。后一个函数也有两种形式：'counters(name, string)' 或'counters(name, string, style)'。生成的文本是此伪元素范围内具有给定名称的所有计数器的值，由指定字符串从最外层到最内层分隔。计数器以指定的样式呈现（默认为“十进制”）。有关详细信息，请参阅有关自动计数器和编号的部分。名称不得为“无”，“继承”或“初始”。这样的名称会导致声明被忽略。

仅在li具有类的元素中count：

body {
  counter-reset: section;/* Set the section counter to 0 */
}
ol {
  list-style-type: none;
}
li.count::before {
  counter-increment: section;/* Increment the section counter*/
  content: counter(section)". ";/* Display the counter */
}
<ol>
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ol>

参考

反增量

反复位

于 2015-04-24T14:23:16.247 回答
0

干得好：

https://jsfiddle.net/Cheese1991/qnmhvvxj/

HTML：

<ul>
<li>One</li>
<li>Two</li>
<li class="skip">Skip</li>
<li>Three</li>
<li>Four</li>
</ul>

CSS：

ul {
    counter-reset:yourCounter;
    list-style:none;
}
ul li:not(.skip) {
    counter-increment:yourCounter;
    list-style:none;
}
ul li:not(.skip):before {
    content:counter(yourCounter) ". ";
}
ul li.skip:before {
    content:"\a0\a0\a0";
}

我希望这能帮到您

于 2015-05-01T08:23:36.450 回答