这个地方怎么写让他变成ABC递增。
span.ps::before{
counter-increment:name;
content:counter(name,upper-alpha);
}
这么写好像是不行。
这个地方怎么写让他变成ABC递增。
1. detail version
- We have a papa and many baby! (I don’t think information: plural is needed since I put the word: MANY here!)
- We wanna count babies by CSS ( which can only add style content)
- So, we start counting from where?
- set the counter-reset: NAME to denote the place where we starting to count!
- then set the info: what items we count by counter-increment: NAME, of course, here, they were the babies.
- 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 个赞
Thanks for your reply, thanks in advance 
能搭个顺风车吗？我在看牛津中阶双解【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)
- search a demo word: like
- F12: open inspector(Now we have 2 windows of GoldenDict)
- Ctrl F: search source code
- input text: span.id
- locating the position of code
- copy the text: “if you like”
- switch to the OTHER window of GoldenDict(which is the result page of the word you searched before)
- then Ctrl F to paste the text: “if you like”
- Now you’ll find the position of the content.
- then use the same pattern to search “span.phr”
- found 0 results?
- Fine, try another word like: take, which has many phrases, it may contain “span.phr”
- 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;
/* 左边留白－１８个像素点，纸都负数了，说明什么，说明纸往右面去了，字跑左边别的ｔａｇ的纸上去了 */
margin-left: -18px;
/* 对齐，字在自己的纸内，靠右靠 */
text-align: right;
/* 宽度 */
width: 10px;
/* 没用到过，原谅我的无知。。 */
position: absolute;
}
1 个赞
非常感谢您所提供的途径步骤。从中弄清楚了一些对应关系，而counter-reset: inum pvnum;应该是两组不同的计数器。content: counter(inum)此句有个坑，如果写成content: counter (inum)，则不会显示任何计数。仍未弄明白的是计数器的数字并未递增，如图
请您指正！
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>
</>
1 个赞
我觉得可以自己看css学，比如这个问题可以用 w2k那版的韦氏高阶的css照着学
我懒得去开电脑折腾了，如果，我说如果啊，你学懂了乐意的话，我很期待你回来留言。
thanks in advance 
自学有自学的乐趣，但容易走弯路，耗时。原来学过点nsis，学的费劲，结果有些还是过时的东西，很多好作品都不分享源代码，现在随着nsis论坛关闭，这些也就永远消失了。所以转到这里来学点东西。谢谢您的指路，明天能找着 w2k那版的韦氏高阶的css，一定看看。
1 个赞
请注意，你贴出来的 it 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>
向楼主汇报，学会了，乐着呢。
css counter的重点是写
选择器
{counter-reset:counter-name;}
然后上面这个counter-reset的选择器，要 把需要计数的给包围起来 。
剩下的看看mozilla、w3s的就可以了
然后欧路不支持*和body这两个选择器，所以没办法粗暴的写。然后这就是我发这帖子的原因。
解决了，可喜可乐！
不对，并不必需。某元素 -reset，它的后代元素 -increment，“包围起来”只是一种方便重置的常见情形。
请看这个示例，h1 和 h2 只是 siblings，也可以使用计数器：
https://www.w3school.com.cn/tiy/t.asp?f=css_counters_2
图里有两个计数器，我说的是第二个，即 subsection，它在 h1 处 reset，h2 处 increment。和 body 无关。
明白你的意思了，和我说的一个意思，可能我表述有问题。
我的意思是，计数器要生效，必须找到一个标签把内容框起来，
仔细看了一下，
又学到一招，谢谢啦
h1h2h3h4这些不被包围的，也可以作为父级，写入{counter-reset}
1 个赞
