content内容生成技术
- 2018-7-21
- Web
Content 内容技术主要是伪元素生成元素技术。这类由 CSS 动态生成的元素有很多有趣的特点,特别是生成的伪元素无法由 JavsScript 直接访问这个特性。CSS 伪元素仅用于改变视觉呈现,并不改变 DOM 文档树的结构。因此我们很有必要去深入理解一下 Content 内容生成技术。。
替换元素与非替换元素之间的区别
1. 只差一个src属性
1 | <img alt="任意值"> 非替换元素 |
1 | img { |
2. 只差一个CSS content属性
1 | img { content: url(1.jpg) } |
如果图片原来是有src属性,也可以通过content属性替换文件的内容 1
2
3
4<img src="laugh.jpg">
img:hover {
content: url(tear.jpg); /* 这里立个flag */
}
h1典型的非替换元素对吧,来我们给他加个content属性 1
2
3
4
5<h1>这是一个标题</h1>
h1 {
content: url(logo.png) /* 光速变成一个替换元素 */
}
3. content生成内容的特性
content属性生成的对象被称为"匿名替换元素"
1. content生成的文本无法复制、无法选中
2. 不能左右:empty
伪类
3. 生成的图片获取不到链接(右击保存的仍是原有图片的链接)(看前面的flag)
总的来说,content内容生成的元素仅仅只是影响视觉呈现,并不能通过JavaScript获取得到content生成的内容对象。
content内容生成技术(今天的重点)
因为content内容生成技术几乎都是用在伪元素::before
和::after
(mdn光速查询这个两个关键字)这两个伪元素中,因此content内容生成技术又被叫做::before
和::after
伪元素技术。
1.content辅助元素生成
(用于辅助实现两端对齐、垂直居中、上边缘、下边缘等对齐效果) 由于内容太过深入...在此立个FLAG以后会深入讲
2. content字符内容生成
1 | <span class="icon-home"></span> |
3. content图片内容生成
1 | div::before { |
4. content属性值内容生成
动态生成一个元素的属性 1
2
3img::after { /* Firefox下::before伪元素content值会被无视,尽量用::after */
content: attr(alt); /* 给img生成alt属性 */
}
1 | .icon::before { |
★5.深入理解content计数器
- content计数器只支持整数
- 支持负数
属性 counter-reset 声明计数器并指定初始值(默认是0)
1
2
3
4
5
6
7
8
9
10.cnt {
counter-reset: wangxiaoer; /* 声明计数器王小二 默认初始值为0 */
}
.cnt {
counter-reset: wangxiaoer 2; /* 声明计数器王小二并指定初始值为2 */
}
.cnt {
counter-reset: wangxiaoer 2 wangxiaosan 3;
/* 也可以同时声明多个计数器 */
}属性 counter-increment 计数器递增(默认递增1)
1
2
3
4
5
6
7
8.cnt {
counter-reset: wangxiaoer; /* 声明计数器王小二 默认初始值为0 */
counter-increment: wangxiaoer; /* 计数器开始递增 默认递增1 */
}
.cnt {
counter-reset: wangxiaoer; /* 声明计数器王小二 默认初始值为0 */
counter-increment: wangxiaoer 2; /* 计数器开始递增 每次递增2 */
}方法 counter(name, style) 显示计数(支持级联)
方法 counters(name, string) 嵌套计数