小编典典
为什么计数器不增加?
您不是在父标记级别重置或创建计数器。如果pre将以下行添加到选择器,代码将正常工作。如果您没有counter-
reset在父级创建计数器(使用),则每个元素都会创建自己的计数器,然后对其进行递增。
counter-reset: line;
什么时候创建计数器?
从W3C规范:
counter-reset属性在元素上创建新的计数器。
计数器集和计数器增量属性可控制现有计数器的值。 只有在元素上还没有给定名称的计数器时, 它们 才创建新的计数器 。
在这种情况下,发生的事情是我们没有使用该counter-reset属性创建计数器,因此伪元素选择器中的counter-
increment属性span:before将创建给定名称的计数器并将其递增。
计数器如何知道当前值?
再次来自W3C规范:
如果元素具有先前的同级,则它 必须继承所有同级的counters 。否则,如果元素具有父级,则它 必须继承父级的所有计数器 。否则,元素必须具有一组空计数器。
然后 ,该元素按文档顺序从前一个元素继承计数器值 。
在这里,由于计数器仅在伪元素中span创建,因此其父级()不知道其创建,因此其同级成员span不会继承计数器。由于它甚至不继承任何计数器,因此也不会从前一个元素获取当前值。
为什么要在父级上创建计数器?
当在pre标签级别创建计数器时,该计数器然后传递到其每个子元素(也就是说,每个子元素span又将span:before知道或继承此计数器),现在in中的增量语句span:before将仅递增它从父级收到的计数器的值。
现在,由于每个span继承line自其先前同级的计数器,因此它们还将继承文档顺序中来自先前元素的当前值,因此它不断从1增加到2、3等。
为什么对跨度或前功使用反增量?
正如你已经猜到,反增量属性 创建 一个新的计数器,当没有现成的计数器等添加counter-increment:
line在span将创建上遇到的第一个跨度的计数器。现在,由于span继承的每个同级都继承了该计数器,因此它不会每次都创建一个新的计数器,而只是从先前的元素继承值。因此,这种方法可以工作,但是最好使用counter-
reset语句显式创建计数器。
浏览器如何支持?
浏览器对CSS计数器的支持非常好。它不是CSS中的新事物,即使在IE8中也支持它。
演示:
pre {
background: #303030;
color: #f1f1f1;
padding: 10px 16px;
border-radius: 2px;
border-top: 4px solid #00aeef;
-moz-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
counter-reset: line;
}
pre span {
display: block;
line-height: 1.5rem;
}
pre span:before {
counter-increment: line;
content: counter(line);
display: inline-block;
border-right: 1px solid #ddd;
padding: 0 .5em;
margin-right: .5em;
color: #888
}
lorem ipsum
>> lorem ipsum
lorem ipsum,\
lorem ipsum.
>> lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
2020-05-16