html中content属性,CSS3的content属性详解
CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个content属性,能够实现页面中的内容插入。
插入纯文字
content:"插入的文章",或者content:none不插入内容
html:
这是h1
这是h2
css
h1::after{
content:"h1后插入内容"
}
h2::after{
content:none
}
嵌入文字符号
可以使用content属性的open-quote属性值和close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote用于添加开始的文字符号,close-quote用于添加结束的文字符号。修改上述的css:
h1{
quotes:"(" ")"; /*利用元素的quotes属性指定文字符号*/
}
h1::before{
content:open-quote;
}
h1::after{
content:close-quote;
}
h2{
quotes:"\"" "\""; /*添加双引号要转义*/
}
h2::before{
content:open-quote;
}
h2::after{
content:close-quote;
}
插入图片
content属性也可以直接在元素前/后插入图片
html:
这是h3
css:
h3::after{
content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}
插入元素的属性值
content属性可以直接利用attr获取元素的属性,将其插入到对应位置。
html:
这是链接
css:
a:after{
content:attr(href);
}
插入项目编号
利用content的counter属性针对多个项目追加连续编号.
html:
大标题
文字
大标题
文字
大标题
文字
大标题
文字
css:
h1:before{
content:counter(my)'.';
}
h1{
counter-increment:my;
}
项目编号修饰
默认插入的项目编号是数字型的,1,2,3.。。。自动递增,也能给项目编号追加文字和样式,依旧利用上面的html,css修改如下:
h1:before{
content:'第'counter(my)'章';
color:red;
font-size:42px;
}
h1{
counter-increment:my;
}
指定编号种类
利用content(计数器名,编号种类)格式的语法指定编号种类,编号种类的参考可以依据ul的list-style-type属性值。利用上述的html,css修改如下:
h1:before{
content:counter(my,upper-alpha);
color:red;
font-size:42px;
}
h1{
counter-increment:my;
}
编号嵌套
大编号中嵌套中编号,中编号中嵌套小编号。
html:
大标题
文字1
文字2
文字3
大标题
文字1
文字2
文字3
大标题
文字1
文字2
文字3
css:
h1::before{
content:counter(h)'.';
}
h1{
counter-increment:h;
}
p::before{
content:counter(p)'.';
margin-left:40px;
}
p{
counter-increment:p;
}
运行结果:https://jsfiddle.net/dwqs/2k5qbz51/
在示例的输出中可以发现,p的编号是连续的。如果对于每一个h1后的三个p重新编号的话,可以使用counter-reset属性重置,修改上述h1的css:
h1{
counter-increment:h;
counter-reset:p;
}
这样,编号就重置了,看看结果:https://jsfiddle.net/dwqs/hfutu4Lq/
还可以实现更复杂的嵌套,例如三层嵌套。
html:
大标题
中标题
小标题
小标题
中标题
小标题
小标题
大标题
中标题
小标题
小标题
中标题
小标题
小标题
css:
h1::before{
content:counter(h1)'.';
}
h1{
counter-increment:h1;
counter-reset:h2;
}
h2::before{
content:counter(h1) '-' counter(h2);
}
h2{
counter-increment:h2;
counter-reset:h3;
margin-left:40px;
}
h3::before{
content:counter(h1) '-' counter(h2) '-' counter(h3);
}
h3{
counter-increment:h3;
margin-left:80px;
}
html中content属性,CSS3的content属性详解相关推荐
- python中的content方法_对python requests的content和text方法的区别详解
问题: 一直在想requests的content和text属性的区别,从print 结果来看是没有任何区别的 看下源码: @property def text(self): ""& ...
- z-index失效的几种情况,父标签position属性为relative的时候,详解
网上对这一方面解释的很多,我也不想把别人的抄过来.在这里是加上我对这些情况的理解还有我的一些疑惑,若有问题,请留言,谢谢!!!话不多说,进入正题: 文章重点:z-index失效的一类情况:父标签pos ...
- CSS3的@keyframes用法详解:
原文出处: http://www.cnblogs.com/zuihongyan/p/5902541.html CSS3的@keyframes用法详解: 此属性与animation属性是密切相关的,关于 ...
- WPF中的形状Shape与几何图形Geometry详解
总目录 文章目录 总目录 一.Shape(形状) 1.Shape基本信息 2.Ellipse 1.案例 2.说明 3.Rectangle 1.案例 2.说明 4.Line 1.案例 2.说明 5.Po ...
- html选择器有哪些child,css3选择器child有哪些?css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
- Python中Print()函数的用法___实例详解(二)(全,例多)
Python中Print()函数的用法___实例详解(二)(全,例多) 目录 十一.Print()小例子 十二.Print()中文输入显示乱码问题 十三.Print()写入文件 十四.print()在 ...
- java中sleep()、wait()相同与不同详解
java中sleep().wait()相同与不同详解 相同 java中Thread#sleep和Object#wait方法都是暂停当前线程,当前线程让出CPU占用.并不存在调用sleep后还占用CPU ...
- js 浅拷贝直接赋值_JS中实现浅拷贝和深拷贝的代码详解
(一)JS中基本类型和引用类型 JavaScript的变量中包含两种类型的值:基本类型值 和 引用类型值,在内存中的表现形式在于:前者是存储在栈中的一些简单的数据段,后者则是保存在堆内存中的一个对象. ...
- python实例化是什么意思_Python中实例化class的执行顺序示例详解
前言 本文主要介绍了关于Python实例化class的执行顺序的相关内容,下面话不多说了,来一起看看详细的介绍吧 Python里对类的实例化时有怎样的顺序 一般来说一个类里面有类变量和方法,比如我们定 ...
- python中类的构成_Python中类型关系和继承关系实例详解
本文详细介绍了Python中类型关系和继承关系.分享给大家供大家参考.具体分析如下: 如果一个对象A持有另一个对象B的ID,那么检索到A之后就可以检索到B,我们就说存在一个A到B的导航.这种导航关系使 ...
最新文章
- 理解 CSS 布局和块级格式上下文
- 学习sql注入:猜测数据库_对于SQL的热爱:为什么要学习它以及它将如何帮助您...
- python模块和包(模块、包、发布模块)
- [mmu/cache]-ARM cache的学习笔记-一篇就够了
- 支付接口 随机串 时间戳 防钓鱼效验方式
- linux防火墙配置管理,Linux之Iptables防火墙管理与配置 -电脑资料
- 为何在wpf中textbox的值有时不会实时的变化
- bash历史命令数_如何使用Bash历史记录命令
- 大数据时代已经来临,正在改变我们的生活
- c语言入门基础知识总结
- 分享27个高质量前端大佬的油管频道(上)
- 想成为华为hcie网络工程师一定鸦知道的MSDP 基本介绍
- windows7 内部版本7601,此windows副本不是正版
- 【uniApp 接入萤石云】
- 3dmax中如何赋予材质
- 学计算机电脑显存多少为好,【深度分析】如何配置深度学习用的电脑(显卡和内存的选择标准)...
- 计算机操作系统——LINUX的C语言编程与shell编程
- 面向对象三大特性(多态)
- confluence
- “鸡”不可失,驱动人生助力开启“绝地求生”