1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

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

作者:用户 来源:互联网 时间:2016-11-07 13:15:02

内容动态元素contentEmptyafterEmpty标签CSS伪元素获取伪元素

CSS之before, after伪元素特性表现两则 - 摘要: 本文讲的是CSS之before, after伪元素特性表现两则, 一、特性表现one: 不能左右:empty伪类 CSS3选择器中有个:empty伪类,表示当元素里面什么都没有的时候(包括空格、标签内换行),应用相关样式

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

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

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

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

因为.box里面是空大屁,所以,呈现的背景色就会是下面这样子:
CSS之before, after伪元素特性表现两则-before after

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

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

则,:empty失效,于是,呈现的是靓丽的红色:
CSS之before, after伪元素特性表现两则-<a href=css before after">

下面,高能来了,请问,如果我们使用beforeafter伪元素在.box里面生成内容,:empty伪类还有作用吗?

这个问题动动脚趾头想想都知道:empty伪类依然是起作用的………………才™怪呢!你的脚趾头是长脑袋上的吧!这么有学问的问题,咱就不要想当然YY了,写个简易Demo,实践一下,自然出真知!

乖,请狠狠地点击这里::empty伪类和before/after伪元素Demo

前面3个框框是让你熟悉:empty伪类的,咱们目光直接落到第四个方块,里面的文字就是伪元素生成的:

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

结果,所有现代浏览器下面,依然是娘炮红背景色,截图如下:
CSS之before, after伪元素特性表现两则-before和after的用法

此表现说明,空元素内部使用伪元素生成的内容,是不被:empty伪类认可的,选择器依然认为这是个空元素。

其实呢,我们马后炮一下,::before::after的名称其实就出卖了自己,对吧,我们平常都在呢么称呼的?“伪元素”啊,其中大大的的“伪”字就表明跟一般的元素不一样。

这不,这里被:empty伪类给排挤了。

二、特性表现two: content动态呈现值无法获取

对伪元素熟悉的同学应该都知道,content内容动态生成技术可以动态显示各种内容,包括属性值、计数器等,但是,你可能不知道的是,我们目前压根没有办法获得这些最终具体呈现的content内容,为什么呢?因为我们是飞天小女警,我呸~不对,因为我们是伪元素。

首先,为避免歧义,我有必要解释清楚,我们不是没法获得CSS中content的属性值,而是没法获得页面上content最终呈现的内容值。有啥区别呢,举个例子大家应该就清楚了!

您可以狠狠地点击这里:CSS伪类计数器动态获得选中元素个数Demo

上面这个Demo是去年“CSS计数器+伪类实现数值动态计算与呈现”一文中使用过的Demo,对,就是同一个。

使用纯CSS动态显示你当前选择了几项内容:
CSS之before, after伪元素特性表现两则-<a href=html before after">

伪元素相关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树节点,因此,就没法得到动态呈现内容。



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索内容 , 动态 , 元素 , content , Empty , after , Empty标签 , CSS伪元素 获取伪元素 before after、css before after、before和after的用法、html before after、jquery after before,以便于您获取更多的相关知识。

ie 11-如何在iE f12(审查元素) 中显示after和before节点

问题描述 如何在iE f12(审查元素) 中显示after和before节点 如何在iE f12(审查元素) 中显示after和before节点怎么像chrome和Firefox一样在dom资源管理器里显示after和before节点及其样式?? 解决方...

JS控制伪元素的方法汇总_javascript技巧

.... 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素。我第一想法是强大的CSS Query应该可以获取伪元素吧。 然而事实上,CSS Query并不能。即我们不能通过$(“:before”)、$(dom).find(“:before”)或document.querySelector(“:before”)...

那些年我们一起清除过的浮动

... | right | both | none; 2)闭合浮动:更确切的含义是使浮动元素闭合,从而减少浮动带来的影响。 两者的区别请看优雅的 Demo 通过以上实例发现,其实我们想要达到的效果更确切地说是闭合浮动,而不是单纯的清除浮动,在footer...

初识bootstrap框架,以及sass (CSS预处理器)

...式表格; 关于表单的类 所有设置了.form-control类的、和元素都将被默认设置宽度属性为width: 100%; 表单中的每一块写在.form-group类的div中 Email addressPasswordFile input Example block-level help text here. Check me outSubmit内联表单 为元素添加.for...

清除浮动技巧总结

...个浮动框的边缘。浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也...

前三篇
后三篇