摘要:要配合和属性使用。,给同级元素增加计数器用于标识自增计数器的作用范围,为自定义名称,为起始编号默认为。
**单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素,不过浏览器需要同时支持旧的已经存在的伪元素写法,
比如:first-line、:first-letter、:before、:after等,单冒号(:)兼容性更好**
div::after{ content: "普通字符串"; content: attr(父元素的html属性名称); content: url(图片、音频、视频等资源的url); /* 使用unicode字符集,采用4位16进制编码,但不同的浏览器显示存在差异,而且移动端识别度更差*/ content: "21e0"; /* content的多个值可以任意组合,各部分通过空格分隔 */ content: """ attr(title) """; /* 自增计数器,用于插入数字/字母/罗马数字编号 */ content: counter(插入纯文字, ); /* 以父附属元素的qutoes值作为content的值*/ content: open-quote | close-quote | no-open-quote | no-close-quote; }
content:"string",或content:none不插入内容
h1::after{ content:"h1后插入内容" } h2::after{ content:none }字符集
插入图片13900001390
.phoneNumber::before{ content:"260E"; font-size: 16px; }
content属性也可以直接在元素前/后插入图片
h3::after{ content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif) }插入元素的属性值
content属性可以直接利用attr获取元素的属性,将其插入到对应位置。
这是链接 a:after{ content:attr(href); }计数器
counter 调用计数器,可以不使用列表元素实现序号功能。
counter 要配合 counter-increment 和 counter-reset属性使用。
content: counter(, ); : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha
counter-reset: [
用于标识自增计数器的作用范围,
counter-increment: [
用于标识计数器与实际关联的范围,
qutoes大标题
中标题
小标题
小标题
中标题
小标题
小标题
大标题
中标题
小标题
小标题
中标题
小标题
小标题
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; }
大标题
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; }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/117232.html
摘要:一无继承性的属性规定元素应该生成的框的类型文本属性垂直文本对齐规定添加到文本的装饰文本阴影效果空白符的处理设置文本的方向盒子模型的属性,,,,,,,,,,,,,,,,,,,,,,,,,背景属性一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性:vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 ...
摘要:水平居中水平居中没有什么好说的啦,对于行内元素使用对于块级元素使用前提是已经为元素设置了适当的宽度垂直居中单行文本多行文本伪元素行内元素伪元素未知宽高绝对居中绝对定位已知宽高负要考虑兼容性浮动元素垂直居中父元素 水平居中 水平居中没有什么好说的啦,对于行内元素使用text-align;对于块级元素使用margin: auto(前提是已经为元素设置了适当的 width 宽度); 垂直居中...
摘要:,,层叠样式表,请留意层叠概念。为了区分伪类和伪元素,伪元素采用双冒号写法。常见伪类。常见伪元素。和伪元素的用法和下特有的,用于在渲染中向元素逻辑上的头部或尾部添加内容。CSS,cascading style sheet,层叠样式表,请留意层叠概念。 css3为了区分伪类和伪元素,伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:targ...
阅读 1061·2021-10-14 09:42
阅读 1342·2021-09-22 15:11
阅读 3245·2019-08-30 15:56
阅读 1209·2019-08-30 15:55
阅读 3570·2019-08-30 15:55
阅读 865·2019-08-30 15:44
阅读 2003·2019-08-29 17:17
阅读 2051·2019-08-29 15:37