Shiqi's Blog

content内容生成技术

content内容生成技术

Content 内容技术主要是伪元素生成元素技术。这类由 CSS 动态生成的元素有很多有趣的特点，特别是生成的伪元素无法由　JavsScript 直接访问这个特性。CSS 伪元素仅用于改变视觉呈现，并不改变 DOM 文档树的结构。因此我们很有必要去深入理解一下 Content 内容生成技术。。

替换元素与非替换元素之间的区别

1. 只差一个src属性

1
2
<img alt="任意值"> 非替换元素
<img src="" alt="任意值"> 替换元素
1
2
3
4
img {
  display: block; /* img的宽度是多少? */
  outline: solid;
}

2. 只差一个CSS content属性

1
2
3
4
img { content: url(1.jpg) }
<img>

<img src="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
2
3
4
5
6
7
8
9
10
11
12
13
<span class="icon-home"></span>

css:
@font-face { /* 定义自定义字体 */
font-family: "myico"; /* 定义字体名 */
src: url("myfont.woff") format("woff); /* 定义字体路径及格式 */
}

.icon-home:before {
  font-size: 64px;
  font-family: myicon;
  content: "x";
}

3. content图片内容生成

1
2
3
4
5
6
7
8
9
div::before {
  content: url(1.jpg)
}
/* 其实不是很实用，content生成的图片不能控制大小 */
/* 所以一般用background代替 */
div::before {
  content: '';
  background: url('bg.ico1') 50px 50px;
}

4. content属性值内容生成

动态生成一个元素的属性 

1
2
3
img::after { /* Firefox下::before伪元素content值会被无视，尽量用::after */
content: attr(alt); /* 给img生成alt属性 */
}

1
2
3
.icon::before {
  content: attr(data-title); /* 也支持生成自定义属性 */
}

★5.深入理解content计数器

  • content计数器只支持整数
  • 支持负数

  1. 属性 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;
      /* 也可以同时声明多个计数器 */
    }

  2. 属性 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 */
    }

  3. 方法 counter(name, style) 显示计数(支持级联)

  4. 方法 counters(name, string) 嵌套计数