Question

假设我有一个简单的列表：

<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>

现在，我只想使用班级＆＃39;计数＆＃39;

对列表项进行编号

所以如果我添加CSS：

li {
    list-style-type: decimal;
}

然后删除没有类的列表项的list-style-type：

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

我明白了：

FIDDLE

＆＃13;

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

＆＃13;

<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>

＆＃13;

这里显而易见的问题是没有课程的列表项目也被计算在内＃39;这里，没有显示。

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

Answer 1

可以使用CSS-counters

完成此操作

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

<强> FIDDLE

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

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>

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

这是概念证明的an example：

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>

Answer 2

将display: block提供给没有.count课程的li元素也可以。

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

<强> Working Fiddle

对于旧版浏览器：

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

Working Fiddle

另一种方法是，如果您计划更改所有li元素的显示状态，请使用:after / :before伪类，并将其显示为列表项。

<强> Working Fiddle

Answer 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计数器。

Answer 4

counters section in CSS 2.1 specifications包含有关如何实施自定义计数器的各种示例。以下是一个非常简单的示例：

定义计数器变量
为特定元素增加它（在您的情况下，它将是.count元素）
在伪元素中显示

.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>

Answer 5

li {
    list-style-type: decimal;
}

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

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

appearance属性用于显示使用基于用户的平台本地样式的元素＆＃39;操作系统的主题。 source

Answer 6

一种解决方案可能是使用CSS counters并使用伪元素:before将content属性提前应用于计数器，

可以指定计数器具有两种不同的功能：＆＃39; counter（）＆＃39;要么＆＃39;计数器（）＆＃39 ;.前者有两种形式：＆＃39; counter（name）＆＃39;要么＆＃39;柜台（名称，风格）＆＃39;。生成的文本是的值此伪元素范围内给定名称的最内层计数器; 它以指定的样式（＆＃39;十进制＆＃39;默认情况下）格式化。该后一种功能也有两种形式：＆＃39;计数器（名称，字符串）＆＃39;要么＆＃39;计数器（名称，字符串，样式）＆＃39;。生成的文本是值在此伪元素的范围内具有给定名称的所有计数器，来自最外面到最里面由指定的字符串分隔。柜台以指定的样式呈现（＆＃39;十进制＆＃39;默认情况下）。见有关自动计数器和编号的部分以获取更多信息。该名称不得为“没有”，“继承”＃39;或者＆＃39; initial＆＃39;。这样的名字会导致声明被忽略。

仅限li个count个元素：

＆＃13;

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 */
}

＆＃13;

<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>

＆＃13;

<强>参考

counter-increment

counter-reset

Answer 7

你走了：

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

HTML：

＆＃13;

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

＆＃13;

CSS：

＆＃13;

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";
}

＆＃13;

我希望这会对你有所帮助

你能用CSS计算一个特定的类吗？

7 个答案: