前言

上一节学完了CSS中的替换元素，本节就来介绍一下的替换元素的特点。

替换元素

首先来回顾一下什么是替换元素，替换元素，顾名思义，就是内容可以替换的元素。

也就是content 属性生成的内容都是替换的元素。

替换元素的特点

content 生成的文本无法选中、复制： 好像设置了 userselect:none 声明一般，但是普通元素的文本却可以被轻松选中。

content 生成的文本无法被屏幕阅读设备读取:，因此，千万不要自以为是地把重要的文本信息使用 content 属性生成。

content 生成的文本无法被搜索引擎抓取: 因为这对可访问性和 SEO 都很不友好。

content 生成的文本替换的仅仅是视觉层: 当我们以右键或其他形式保存时，所保存的还是原来内容。 可以用来生成一些无关紧要的内容，如装饰性图形或者序号之类；同样，也不要担心原本重要的文字 信息会被 content 替换。

content 生成的文本不能左右:empty 伪类:

例如：下面的 HTML 和 CSS 代码：

    <div>有内容</div>
    <div></div>
    div { padding: 10px; border: 10px solid #cd0000; } 
    div:empty { border-style: dashed; }

前面一个是实线边框，而后面的，因为里面无内容，所以就是虚线边框。

image.png

接下来，我们使用 content 属性给生成一些文字：

    div::after { content: "伪元素生成内容"; }

结果看上去好像里面出现了文字内容，实际上，还是当成了:empty效果：

image.png

content 动态生成值无法获取：

content 是一个非常强大的 CSS 属性，其中一个强大之处就是计数器效果，可以自动累加数值。

例如：下图中的数字 3 就是 content 动态生成的：

image.png

核心 CSS 代码如下：

    .total::after { 
        content: counter(icecream); 
    }

此时我们无法获得 content 对应的具体数值是多少的。

getComputedStyle 方法可以获得伪元素的计算样式。但是，得到的只是纯粹的 content 在 CSS 文件中的属性值。 例如，这里：

    var dom = document.querySelector(".total"), 
    window.getComputedStyle(dom , "::after").content; // 结果是："counter(icecream)"

结果是"counter(icecream)"，而不是数值 3。

结语

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！