Css计数器怎么写


这个地方怎么写让他变成ABC递增。

span.ps::before{
counter-increment:name;
content:counter(name,upper-alpha);
}

这么写好像是不行。

1. detail version

  1. We have a papa and many baby! (I don’t think information: plural is needed since I put the word: MANY here!)
  2. We wanna count babies by CSS ( which can only add style content)
  3. So, we start counting from where?
  4. set the counter-reset: NAME to denote the place where we starting to count!
  5. then set the info: what items we count by counter-increment: NAME, of course, here, they were the babies.
  6. last, set where to show the counter info? Of course, before the items in this case:***:before{content: **** }

2. simple version

papa tag => counter-reset: NAME_X;

babies tag class selector => counter-increment: NAME_X;

babies tag class selector :before => add content => content: “YYY” counter(NAME_X, upper-alpha) "ZZZ ";

Code cut from .css file

.d {
    counter-reset: vtC;
}
.vt{
    counter-increment: vtC;
}
.vt::before {
    content: " " counter(vtC, upper-alpha) ": ";
}

@mdict6 Thank me in advance!!!

3 Likes

Thanks for your reply, thanks in advance :doge_bilibili:

能搭个顺风车吗?我在看牛津中阶双解【CSS】2019.12.12
的css
参照您的css,我把其中相关的类似部分找了出来:
/*
}
div.explain {
margin-left: 18px;
counter-reset: inum pvnum;
}
span.id:before {
content: counter(inum)“.”;
counter-increment: inum;
}
span.phr:before{
content: counter(pvnum)“.”;
counter-increment: pvnum;
}
/
对相关对应标签很迷惑,只能找到
/

.num {
color:#ff7723;
font-weight: bold;
display: block;
float: left;
margin-top: 1px;
margin-left: -18px;
text-align: right;
width: 10px;
position: absolute;
*/
没弄懂,能否麻烦您给注释解析下。Thank you in advance!!!
njzj1212css.rar (1.5 KB)
able词条.txt (2.4 KB)

  1. search a demo word: like
  2. F12: open inspector(Now we have 2 windows of GoldenDict)
  3. Ctrl F: search source code
  4. input text: span.id
  5. locating the position of code
    image
  6. copy the text: “if you like”
  7. switch to the OTHER window of GoldenDict(which is the result page of the word you searched before)
  8. then Ctrl F to paste the text: “if you like”
  9. Now you’ll find the position of the content.
  10. then use the same pattern to search “span.phr”
  11. found 0 results?
  12. Fine, try another word like: take, which has many phrases, it may contain “span.phr”
  13. read it, understand it, enjoy it.

By the way, “Thank me in advance” is a joke between @mdict6 due to our history.

You don’t have to thank me, relax.

more detail explanation

Items that you list above, is not connected by the CSS_COUNTER, it use text inside a HTML TAG to add the number instead of CSS_COUNTER.

But if you mean you wanna change THAT explanation items, you can just change the content that the class: “.num” block contains.

.num {    
    /* 颜色 */
        color:#ff7723;
    /* 粗细 */
        font-weight: bold;
    /* 显示:行 or 块 */
        display: block;
    /* 脱离文档,让其他文字环形围绕它,它跑到左 */
        float: left;
    /* 文字的所占的纸的留白,上面留白1个像素点 */
        margin-top: 1px;
    /* 左边留白-18个像素点,纸都负数了,说明什么,说明纸往右面去了,字跑左边别的tag的纸上去了 */
        margin-left: -18px;
    /* 对齐,字在自己的纸内,靠右靠 */
        text-align: right;
    /* 宽度 */
    width: 10px;
    /* 没用到过,原谅我的无知。。 */
    position: absolute;
}
1 Like

非常感谢您所提供的途径步骤。从中弄清楚了一些对应关系,而counter-reset: inum pvnum;应该是两组不同的计数器。content: counter(inum)此句有个坑,如果写成content: counter (inum),则不会显示任何计数。仍未弄明白的是计数器的数字并未递增,如图
image
请您指正!

it...that
<link rel="stylesheet" href="WordList.css"><div class="pattern">it...that 主语从句</div><div class="coll"><span class="id">That引导的主语从句可位于句首:<id></span><span class="ex"><span class="st">That they could get material benefits from her never entered their minds.<st></span><span class="ch">他们能从她那里得到物质利益的想法从来没有进入过他们的脑海。<ch></span><ex></span><coll></div>
<div class="coll"><span class="id">为避免头重脚轻的句子,由That引导的主语从句常变为it...that以使句子平衡:<id></span><span class="ex"><span class="st">Finally it was clear that there was no hope of catching her.<st></span><span class="ch">最后很明显,抓到她是没有希望的。<ch></span><ex></span><coll></div>
</>

我觉得可以自己看css学,比如这个问题可以用 w2k那版的韦氏高阶的css照着学

我懒得去开电脑折腾了,如果,我说如果啊,你学懂了乐意的话,我很期待你回来留言。
thanks in advance :doge:

自学有自学的乐趣,但容易走弯路,耗时。原来学过点nsis,学的费劲,结果有些还是过时的东西,很多好作品都不分享源代码,现在随着nsis论坛关闭,这些也就永远消失了。所以转到这里来学点东西。谢谢您的指路,明天能找着 w2k那版的韦氏高阶的css,一定看看。

Any new context?

Any goal description, please?

You wanna add 123 before 例 ?

请注意,你贴出来的 in that 词条里不存在 div.explain,所以计数器根本没设置成功,结果就是全显示成 1。解释如下

Note that counters can only be set, reset, or incremented in elements that generate boxes. For example, if an element is set to `display: none` then any counter operation on that element will be ignored.

推荐你完整阅读以下文章:

我都看晕了,也看不懂。

还是论坛里人才济济,言简意赅,一针见血,厉害。

<link rel="stylesheet" href="WordList.css">
    <div class="pattern">
        it...that 主语从句
    </div>
    <div class="coll">
        <span class="id">
            That引导的主语从句可位于句首:
            <id>
        </span>
        <span class="ex">
            <span class="st">
                That they could get material benefits from her never entered their minds.
                <st>
            </span>
            <span class="ch">
                他们能从她那里得到物质利益的想法从来没有进入过他们的脑海。
                <ch>
            </span>
            <ex>
        </span>
        <coll>
    </div>
<div class="coll">
    <span class="id">
        为避免头重脚轻的句子,由That引导的主语从句常变为it...that以使句子平衡:
        <id>
    </span>
    <span class="ex">
        <span class="st">
            Finally it was clear that there was no hope of catching her.
            <st>
        </span>
        <span class="ch">
            最后很明显,抓到她是没有希望的。
            <ch>
        </span>
        <ex>
    </span>
    <coll>
</div>