你能用CSS计算一个特定的类吗？ [英] Can you count a particular class with CSS?

问题描述

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

 < ol> 
< li class =count>一个< / li> 
< li class =count>两个< / li> 
< li class =count> three< / li> 
< li class =count>四< / li> 
< li> blabla< / li> 
< li class =count> five< / li> 
< li class =count>六< / li> 
< li> blabla< / li> 
< li class =count>七< / li> 
< / ol> 
  

现在我只想使用'count'类来列出列表项

所以，如果我添加CSS：

  li {
 list-style-type ：decimal; 
} 
  

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

  li：not（.count）{
 list-style-type：none; 
} 
  

我得到：

FIDDLE

li {list-style-type：decimal;} li：not（.count）{list-style-type：none;}

 < ol> < li class =count>一个< / li> < li class =count>两个< / li> < li class =count> three< / li> < li class =count> four< / li> < li> blabla< / li> < li class =count>五< / li> < li class =count>六< / li> < li> blabla< / li> < li class =count>七< / li>< / ol>  

这里显而易见的问题是没有类的列表项在这里也被计数，只是没有显示。

，列表应编号为7 - 编号跳过没有类的列表项。
这可以用CSS完成

解决方案

这可以通过 CSS计数器

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

FIDDLE

（ Edit：或者，正如其他人所指出的 - 我们可以只对特定类的元素增加计数器 - like like ）

  ol {counter-reset：计数; 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>一个< / li> < li class =count>两个< / li> < li class =count> three< / li> < li class =count> four< / li> < li> blabla< / li> < li class =count>五< / li> < li class =count>六< / li> < li> blabla< / li> < li class =count>七< / li>< / ol>  

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

这里是一个用于证明概念的示例：

  html {counter-reset：divs;} body {counter-reset：paragraph; 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：paragraph;} wpr：after {content：Number of count- in container：counter（count-me）; position：absolute; bottom：-20px;}。container：after {content：段数：counter（paragraph）; position：absolute; bottom：-40px;} body：after {content：Number of divs：counter（divs）; position：absolute;底部：-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> Im a paragragh< / p>< / div>< div> div5< p> Im a paragragh< / p& < / div> < div> div6< span class =count-me> count-me< / span> < / div> < div> div7< span class =count-me> count-me< / span> < p> Ima paragragh< / p>< / div>< div> div8< / div>< / div>< / div>  
 

Lets say I have a simple list like so:

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

Now I only want to number list items with the class 'count'

So If I add the CSS:

li {
    list-style-type: decimal;
}

and then remove the list-style-type for list items without the class:

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

I get this:

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>

The obvious problem here is that the list items without the class are also 'counted' here, just not shown.

So in the above example, the list should be numbered to 7 - with the numbering skipping the list items without the class. Can this be done with CSS?

解决方案

This can be done with CSS-counters

If I set display:none on the generated content with the counter, the counter skips over it, and continues to the next item!

FIDDLE

(Edit: Or, alternatively - as others have pointed out - we could increment the counter only on the elements with the particular class - 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>

So actually, with counters, not only can we count classes, we can also count any selector combination.

Here's an example for proof of concept:

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>

这篇关于你能用CSS计算一个特定的类吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！