&nbs p;
一、特性表现one: 不能左右:empty伪类
CSS 3选择器中有个 :empty 伪类 ，表示当元素里面什么都没有的时候（包括空格、标签内换行），应用相关样式。在现代web网页开发 制作 中，非常常用也非常方便。
例如，某元素类名是 .box , 如下 HTML 和CSS:
@H_ 777 _12@<div class="box"></div>
.box { background-color: # cd0000; } .box:empty { background-color: #fae6e6; } 因为 .box 里面是空大屁，所以，呈现的背景色就会是下面这样子：
假如 .box 里面有空格，或是文字，或是标签之类：
<div class="box">我是文字</div>
则， :empty 失效，于是，呈现的是靓丽的 红色 ：
下面，高能来了，请问，如果我们使用 before 或 after 伪元素在 .box 里面生成内容， :empty 伪类还有作用吗？
这个问题动动脚趾头想想都 知道 :empty 伪类依然是起作用的………………才™怪呢！你的脚趾头是长脑袋上的吧！这么有学问的问题，咱就不要想当然 yy 了，写个 简易 Demo，实践一下，自然出真知！
乖，请狠狠地点击这里：:empty伪类和before/after伪元素Demo
前面3个框框是让你熟悉 :empty 伪类的，咱们目光直接落到第四个方块，里面的文字就是伪元素生成的：
.pseudo: :after { content: '伪元素生成内容'; } 结果，所有现代浏览器下面，依然是娘炮红背景色，截图如下：
此表现说明，空元素内部使用伪元素生成的内容，是不被 :empty 伪类认可的，选择器依然认为这是个空元素。
其实呢，我们马后炮一下， :: before , ::after 的名称其实就出卖了自己，对吧，我们平常都在呢么称呼的？“伪元素”啊，其中大大的的“伪”字就 表明 跟一般的元素不一样。
这不，这里被 :empty 伪类给排挤了。
二、特性表现two: content动态呈现值无法获取
对伪元素熟悉的 同学 应该 都知道，content内容动态生成技 术 可以动态显示各种内容，包括属性值、计数器等，但是，你可能不知道的是，我们目前压根没有办法获得这些最终具体呈现的 content 内容，为什么呢？因为我们是飞天小女警，我呸~不对，因为我们是伪元素。
首先，为避免歧义，我有必要解释清楚，我们不是没法获得CSS中 content 的属性值，而是没法获得页面上 content 最终呈现的内容值。有啥区别呢，举个例子大家应该就清楚了！
您可以狠狠地点击这里：CSS伪类计数器动态获得选中元素个数Demo
上面这个Demo是去年“CSS计数器+伪类实现数值动态计算与呈现”一文中使用过的Demo，对，就是同一个。
使用纯CSS动态显示你当前选择了几项内容：
伪元素相关CSS如下：
. total ::after { content: counter(icecre am ); } 很 简单 的CSS，伪元素，内容显示的是 icecream 这个计数器当前的值？
高能再次来临，如果让你获得 .total 这个元素目前呈现的数值数目(比方说上面截图显示的 3 )，你怎么获取？
告诉你，你妄图想通过 .total 这个元素获得这个动态数值 3 难于上青天！
以前介绍过window.getComputedStyle方法，可以获得伪元素的计算样式。但是，抱歉，得到的只是纯粹的 content 在CSS文件中的属性值，例如这里：
VAR dom = document.querySelector(".total"), window.getComputedStyle(dom , "::after").content; // 结果是："counter(icecream)" 结果是”counter(icecream)”，而不是数值 3 。为啥子没法获取呢？我们继续马后炮一下，因为是“伪元素”，不是元素。哈哈，这个解释好像有点敷衍，我特意去规范文档看了一圈，没找到很 明确 的解释。 不过 网上有说法是因为 before , after 不属于 正常 DOM树节点，因此，就没法得到动态呈现内容。
三、结束语
关于以上 before , after 伪元素两个解释，还望对规范对标准有过研究的同行指点下，也就是从根本上解释下 原因 。
好了，本文的内容就这些，欢迎交流，欢迎反馈。行为仓促，错误难免，欢迎纠正，感谢阅读！
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS之before, after伪元素特性表现两则 全部内容，希望文章能够帮你解决 html5教程-CSS之before, after伪元素特性表现两则 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS之before, after伪元素特性表现两则的详细内容...