博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3之使用选择器在页面中插入内容
阅读量:6220 次
发布时间:2019-06-21

本文共 1104 字,大约阅读时间需要 3 分钟。

    1. 使用选择器来插入内容:例,
    h2:before{
                        content:‘COLUMN’;
                        color:white;
                        background-color:orange;
                        padding:1px 5px;
                        }
    2. 指定个别元素不进行插入:例,
    h2.sample.before{
                                    content:none;
                                    }    --表示h2中class为sample的不插入内容--
    3. 使用选择器插入图像:例,
    h2:before{
                        content:url(mark.png);
                        }
    4. 使用content属性来插入项目编号:
            在多个标题前加上连续编号:在content属性中使用counter属性来针对多个项目追加连续编号另外,还需要在元素的样式中追加对元素的counter-increment属性的指定,为了使用连续编号,需要将counter-increment属性的属性值设定为before选择器或after选择器的counter属性值中指定的计数器名。例,
            h1:before{
                                content:counter(mycounter);
                                }
            h1{
                counter-increment:mycount;
                }
    5. 在项目编号中追加文字:例,
    h1:before{
                        content:‘第’counter(mycounter)'章';
                        }
    指定编号的种类:
    content:counter(计数器名,编号种类)
    upper-roman:大写罗马字母
    upper-alpha:大写字母
    编号嵌套:可以在大编号中嵌套中编号,在中编号中嵌套小编号。
    大编号:
    h1:before{
                        content:counter(mycounter);
                        }
    h1{
        counter-increment:mycounter;
        }
    中编号:
    h2:before{
                        content:counter(subcounter);
                        }
    h2{
        counter-increment:subcounter;
        }
    在这个事例中,中标题的编号是连续的,如果想在第二个大标题里的中标题重新开始编号的话,需要在大标题中添加counter-reset属性,在这事例中counter-reset:subcounter
    
    6. 在字符串两边添加嵌套文字符号:可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote属性值用于添加开始的嵌套文字符号,close-quote属性值用于添加结尾的嵌套文字符号。注意,当需要添加双引号时,需要使用“\”转义字符。例,
    
结果:
        

转载地址:http://aleja.baihongyu.com/

你可能感兴趣的文章
关于JS
查看>>
你得学会并且学得会的Socket编程基础知识(转)
查看>>
[Python]安装完pip、pygame后,仍然import pygame报错
查看>>
吃鸡蛋引发的血案,详解内存中的字节序
查看>>
【1139】数据结构上机测试2-2:单链表操作B (逆序建表+重复元素删除)
查看>>
C++ 内存管理之三(栈和堆)
查看>>
Windows7 64bit 安装python3.3 & cx_Freeze-4.3.2
查看>>
手写web服务器
查看>>
也谈 Python 的中文编码处理
查看>>
[LeetCode] LRU Cache
查看>>
OpenStack若干概念
查看>>
AttributeToElement
查看>>
php使用循环创建任意长度数组
查看>>
站立会议03
查看>>
POJ3068:"Shortest" pair of paths——题解
查看>>
上传本地文件到github(码云)上(小乌龟方式,sourcetree方式)
查看>>
微软Holographic将更名为Windows Mixed Reality
查看>>
豪情哥的忠告 能做到这一条就够用了
查看>>
精彩的javascript对象和数组混合相加
查看>>
Markdown介绍及工具推荐
查看>>