CSS计数器
本帖最后由 马黑黑 于 2022-1-8 08:21 编辑CSS计数器 | 马黑黑
之前提到过CSS有一定的编程功能。毕竟，CSS具备“语言”的特征，被认为是一门特殊语言，既然是语言，多少都有点编程功能。今天就通过介绍CSS计数器来领略CSS的微编程风采。
计数器就是counter，CSS在从事相关计数工作之前，首先需要创建或重置（reset）计数器，就像秒表的操作一样：
counter-reset
我们可以在一个名为 wenzhang 的类选择器中创建计数器，我们给这个计数器一个名字，jie，就是“节”的意思：
.wenzhang {
counter-reset:jie;
}
现在，计数器已经准备就绪，进入工作状态了，但我们还需要做一些基于计数器的其他事情。其一是告诉计数器递增谁，用 counter-increment 指令：
counter-increment:jie;
counter-increment 就是计数器增值，上面的指令就是命令它你给我把 jie 这个东东递增了。这样，CSS计数功能就会给 jie 计数，它将给出的结果是 counter(jie)，只是一个数，我们要让他友好一些，用 content 预设显示内容（content就是“内容”的意思）：
content:"第 " counter(jie) " 节";
上面的两个指令要用在伪元素中：
h2::before {
counter-increment:jie;
content: "第 " counter(jie) " 节：";
}
h2是HTML标题标签，h2::before 是基于h2的伪标题元素，before是“在……之前”，这是告诉浏览器h2这个“伪军”在加载前要做点什么。做什么呢？第一，递增“jie”这个计数的数，第二，把内容按事先预设的样子给出来。
然后，下面的“真军”就开干了——HTML的h2代码：
<h1>CSS选择器：</h1>
<h2>通用选择器</h2>
<h2>元素选择器</h2>
<h2>id选择器</h2>
<h2>类选择器</h2>
<h2>属性选择器</h2>
<h2>分组选择器</h2>
<h2>伪选择器</h2>
<h2>组合器</h2>
结果请看下楼，完整代码请看三楼。
本帖最后由 马黑黑 于 2022-1-8 08:21 编辑 <br /><br /><style type="text/css">
.wenzhang { counter-reset:jie; }
h2::before {
counter-increment:jie;
content: "第 " counter(jie) " 节：";
}
</style>
<div class="wenzhang">
<h1>CSS选择器：</h1>
<h2>通用选择器</h2>
<h2>元素选择器</h2>
<h2>id选择器</h2>
<h2>类选择器</h2>
<h2>属性选择器</h2>
<h2>分组选择器</h2>
<h2>伪选择器</h2>
<h2>组合器</h2>
</div>
本帖最后由 马黑黑 于 2022-1-8 08:22 编辑
完整代码：
<style type="text/css">
.wenzhang { counter-reset:jie; }
h2::before {
counter-increment:jie;
content: "第 " counter(jie) " 节：";
}
</style>
<div class="wenzhang">
<h1>CSS选择器：</h1>
<h2>通用选择器</h2>
<h2>元素选择器</h2>
<h2>id选择器</h2>
<h2>类选择器</h2>
<h2>属性选择器</h2>
<h2>分组选择器</h2>
<h2>伪选择器</h2>
<h2>组合器</h2>
</div>
二楼的示范结果，在尝试复制它的时候，“第N节”部分是选择不到的从而无法复制。这种情形相信不会陌生，比如在一些 word 文档中和在web页面中，有序号不能的情形。
论坛的默认编辑模式有添加序号功能，共两个，叫排序列表和未排序列表，样式分别如下：
[*]第一章
[*]第二章
[*]节一
[*]节二
鼠标选择上面四行，序号和大点号是无法选择的。因为这是CSS生成的东东，不属于HTML的内容（但能显示在HTML页面中）。
关于CSS伪元素：
先理解元素的含义。CSS里面的元素，☞HTML相应标签，比如标题标签 h 系列、p标签、span标签等等。HTML标签在CSS中定义样式就用对应的HTML标签名（不建议大写书写标签名）：
p { font-weight:24px; }
div { color: olive; }
以上是正统的元素样式的CSS表达。伪元素则在相应名称之后加入符号 :: ，试看：
p::first-letter { color:red; font-size:xx-large; }
div::before { content: url('https://www.huachaowang.com/static/image/smiley/hcbiaoqing2/127.gif'); }
第一行是p伪元素 p::first-letter，它告诉浏览器p标签的行为将是，第一个字（母）即 first-letter 是红颜色（color:red;）、文字大小是两个x（font-size:xx-large;）；第二行是div伪元素 div::before，它告诉浏览器div加载前（before）的行为是，加载一个图片。这样，所有的<p>^</p>首字母或首字都是红色且大2号，所有的<div>……</div>都加载一张不能选择复制的图片。
伪元素必须用上双冒号 :: ，单冒号 : 用于伪类。
<style type="text/css">
.wys p::first-letter { color:red; font-size:xx-large; }
.wys::before { content:url('https://www.huachaowang.com/static/image/smiley/hcbiaoqing2/127.gif'); }
</style>
<div class="wys">
<p>人类一思考上帝就发笑<br></p>
<p>CSS是人类思考的结果，上帝在哪里发笑？</p><p><br></p><p>代码如下（这里用类选择器，否则所做设置会影响其他地方）：</p><p><br></p><div class="blockcode"><blockquote><style type="text/css"><br><br>.wys p::first-letter { color:red; font-size:xx-large; }<br>.wys::before { content:url('https://www.huachaowang.com/static/image/smiley/hcbiaoqing2/127.gif'); }<br><br></style><br><br><div class="wys"><br> <p>人类一思考上帝就发笑<br></p><br> <p>CSS是人类思考的结果，上帝在哪里发笑？</p><p><br></p><p><br></p><br></div></blockquote></div><p><br></p>
</div> 本帖最后由 马黑黑 于 2022-1-8 10:05 编辑
看 6# 加载图片的方式，CSS加图法，外观上与用img标签无异，但它不能选择、复制。这就是伪元素的 before 行为。 <h1>CSS选择器：</h1>第一个是自动忽略的？也就是content: "第 " counter(jie) " 节："对没开始累加的东东就什么都不做？ 红影 发表于 2022-1-8 19:49
CSS选择器：第一个是自动忽略的？也就是content: "第 " counter(jie) " 节："对没开始累加的东东就什么都 ...
h1不是计数范畴，h2才是 红影 发表于 2022-1-8 19:49
CSS选择器：第一个是自动忽略的？也就是content: "第 " counter(jie) " 节："对没开始累加的东东就什么都 ...
HTML里，标题标签总共有六个，h1到h6 红影 发表于 2022-1-8 19:49
CSS选择器：第一个是自动忽略的？也就是content: "第 " counter(jie) " 节："对没开始累加的东东就什么都 ...
哦哦，我看错了，这个不是选择的<h2>，捂脸，如此马虎的我{:5_109:} 马黑黑 发表于 2022-1-8 09:17
二楼的示范结果，在尝试复制它的时候，“第N节”部分是选择不到的从而无法复制。这种情形相信不会陌生，比 ...
嗯嗯，试了一下去涂黑，果然无法复制。黑黑讲得真仔细{:4_199:} 文字大小是两个x（font-size:xx-large;）
还能这样定义文字大小啊，奇特。 红影 发表于 2022-1-8 20:00
文字大小是两个x（font-size:xx-large;）
还能这样定义文字大小啊，奇特。
这不是学宠物衣衣市场的做法吗，我要5个x，CSS不同意，最多两个x才是合法的（但浏览器知道我胖，用5个x也能渲染） 红影 发表于 2022-1-8 19:55
嗯嗯，试了一下去涂黑，果然无法复制。黑黑讲得真仔细
不是涂黑，是选择{:5_117:} 马黑黑 发表于 2022-1-8 19:51
h1不是计数范畴，h2才是
嗯嗯，我看帖不仔细，回复完了才反应过来{:4_173:} 马黑黑 发表于 2022-1-8 19:52
HTML里，标题标签总共有六个，h1到h6
嗯，是表示大小的吧。 马黑黑 发表于 2022-1-8 20:07
不是涂黑，是选择
我就是用去用鼠标划拉选择，简称涂黑{:4_173:} 马黑黑 发表于 2022-1-8 20:07
这不是学宠物衣衣市场的做法吗，我要5个x，CSS不同意，最多两个x才是合法的（但浏览器知道我胖，用5个x也 ...
那，用五个到底行不行呢？看糊涂了{:4_173:} 红影 发表于 2022-1-8 21:58
那，用五个到底行不行呢？看糊涂了
试过就知道