您的位置:阿里西西 > 前端技术 > CSS教程 > 详细内容

CSS之before, after伪元素特性表现两则...

  本站整理   互联网   2016-11-07   点击:   我要评论

一、特性表现one: 不能左右:empty伪类

CSS3选择器中有个:empty伪类,表示当元素里面什么都没有的时候(包括空格、标签内换行),应用相关样式。在现代web网页开发制作中,非常常用也非常方便。

例如,某元素类名是.box, 如下HTML和CSS:

<div class="box"></div>
.box { background-color: #cd0000; }
.box:empty { background-color: #fae6e6; }

因为.box里面是空大屁,所以,呈现的背景色就会是下面这样子:
淡色背景效果

假如.box里面有空格,或是文字,或是标签之类:

<div class="box">我是文字</div>

则,:empty失效,于是,呈现的是靓丽的红色:
大红背景色

下面,高能来了,请问,如果我们使用beforeafter伪元素在.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计数器与数值动态变化

伪元素相关CSS如下:

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

很简单的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。为啥子没法获取呢?我们继续马后炮一下,因为是“伪元素”,不是元素。哈哈,这个解释好像有点敷衍,我特意去规范文档看了一圈,没找到很明确的解释。不过网上有说法是因为beforeafter不属于正常DOM树节点,因此,就没法得到动态呈现内容。



更多关于 的文章
相关阅读
会员评论所有会员评论

  

相关排行总榜

网页教程

站长文章

特效排行