E:before E:after 插入项目编号

来源：互联网发布：去他妈的全世界知乎编辑：程序博客网时间：2024/05/18 16:40

插入项目编号 – 类别

插入连续项目编号
在项目编号中追加文字
设置编号种类
插入嵌套编号
在字符串两边添加嵌套文字编号

1. 插入连续项目编号

在元素属性中指定counter-increment属性，其属性值表示计数器的名称，然后指定选择器的content属性值为计数器。

例子1

<html><head><style>li{    counter-increment:mycounter;}li:after{    content:counter(mycounter);    color:red;}</style></head><body><ul>    <li>ada </li>    <li>ada </li>    <li>ada </li>    <li>ada </li>    <li>ada </li>    <li>ada </li></ul></body></html>

页面效果1

这里写图片描述

2. 在项目编号中追加文字

方法: 将要追加的文字与计数器一同视为content属性的值

例子2

<html><head><style>p{    counter-increment:mycounter;    }p:before{    content:"第"counter(mycounter)"个";    color:#CC0000  ;}</style></head><body><p>项目编号</p><p>项目编号</p><p>项目编号</p><p>项目编号</p><p>项目编号</p><p>项目编号</p><p>项目编号</p></body></html>

页面效果2

这里写图片描述

3. 设置编号种类

除了数字编号，还可插入字母编号、罗马字母 编号…其他种类的编号，list-style-type的属性值都可以作为编号的种类。

例子3

在<p>元素前面插入大写罗马字母编号

<html><head><style>li{    counter-increment:mycounter;}li:before{    content:"第"counter(mycounter,upper-roman)"个";    color:red;}</style></head><body><ul>    <li>项目编号</li>    <li>项目编号</li>    <li>项目编号</li>    <li>项目编号</li>    <li>项目编号</li>    <li>项目编号</li></ul></body></html>

页面效果3

这里写图片描述

4.插入嵌套编号

方法：分别对每层项目设置计数器，然后使用E:before E:after 选择器插入编号

例子4

chapter and section

<html><head><style>h1{    counter-increment:chapter;    font-size:24px;}h2{    counter-increment:section;    font-size:16px;}h1:before{    content:"第"counter(chapter);}h2:before{    content:"第"counter(section)"."counter(section);    margin-left:40px;}</style></head><h1>章</h1><h2>节</h2><h2>节</h2><h2>节</h2><h1>章</h1><h2>节</h2><h2>节</h2><h2>节</h2></html>

页面效果4

这里写图片描述

5. 在字符串两边添加嵌套文字编号

方法：
1. 在元素的quotes属性中指定文字编号的内容
2. 指定样式的content属性值为open-quote或close-quote
ps: open-quote: 表示字符串开始嵌套的文字编号
close-quote:表示字符串结束嵌套的文字编号

例子5

在书名两侧加书名号

<html><head><style>p{    quotes:"《""》";}p:before{    content:open-quote;    font-size:24px;}p:after{    content:close-quote;    font-size:24px;}</style></head><body><p>幸福的建筑</p><p>中国近代史</p><p>青铜时代</p></body></html>

页面效果5

这里写图片描述

0 0