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

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>

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

所以如果我添加 CSS：

li {
    list-style-type: decimal;
}

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

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

我明白了：

FIDDLE

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 完成吗？

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 包含有关如何实现自定义计数器的各种示例。这是一个非常简单的示例，您可以：

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>

Answer 5

li {
    list-style-type: decimal;
}

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

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

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

Answer 6

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

可以使用两个不同的函数指定计数器：'counter()' 或 '计数器（）'。前者有两种形式：'counter(name)' 或 '计数器（名称，样式）'。生成的文本是 此伪元素范围内给定名称的最内层计数器； 它以指定的样式格式化（默认为“十进制”）。这 后一个函数也有两种形式：'counters(name, string)' 或 '计数器（名称，字符串，样式）'。生成的文本是 此伪元素范围内具有给定名称的所有计数器，来自 由指定字符串分隔的最外层到最内层。计数器 以指定的样式呈现（默认为“十进制”）。见 有关更多信息的自动计数器和编号部分。这 name 不能是“none”、“inherit”或“initial”。这样的名字导致 要忽略的声明。

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

参考文献

counter-increment

counter-reset

Answer 7

给你：

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

希望对你有帮助