你能用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;
}

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

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

Answer 1

这可以使用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>

Answer 2

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/ :beforepseudo类,将display作为list-item.

工作小提琴