CSS计数器

马黑黑 · 发表于 2022-1-8 08:16

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 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:16

本帖最后由马黑黑于 2022-1-8 08:21 编辑

CSS选择器：

通用选择器

元素选择器

id选择器

类选择器

属性选择器

分组选择器

伪选择器

组合器

马黑黑 · 发表于 2022-1-8 08:17

本帖最后由马黑黑于 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>

复制代码

马黑黑 · 发表于 2022-1-8 09:17

二楼的示范结果，在尝试复制它的时候，“第N节”部分是选择不到的从而无法复制。这种情形相信不会陌生，比如在一些 word 文档中和在web页面中，有序号不能的情形。
论坛的默认编辑模式有添加序号功能，共两个，叫排序列表和未排序列表，样式分别如下：

第一章
第二章

节一
节二

鼠标选择上面四行，序号和大点号是无法选择的。因为这是CSS生成的东东，不属于HTML的内容（但能显示在HTML页面中）。

马黑黑 · 发表于 2022-1-8 09:47

关于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>都加载一张不能选择复制的图片。

伪元素必须用上双冒号 :: ，单冒号 : 用于伪类。

马黑黑 · 发表于 2022-1-8 09:57

人类一思考上帝就发笑

CSS是人类思考的结果，上帝在哪里发笑？

代码如下（这里用类选择器，否则所做设置会影响其他地方）：

<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><br></p>
</div>