img标签的before,after伪类
在CSS中总有一些你不用不知道,用到才知道的“坑”。比如今天要谈的,把 before, after 伪类用在 <img> 标签上。
嗯,实际上你用你会发现,在大多数浏览器这是无效的,dom中并不会出现你想要的结果。
为什么会这样呢?
让我们回归到 W3C 标准中寻觅一下,在标准中,before, after 伪类的定义如:
As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.
来自 https://www.w3.org/TR/CSS21/generate.html#before-after-content
我们应该注意到所谓 document tree content,对于 img 这种自闭和标签,似乎不存在 content (内容或后代元素)在标签中,所以选择器没有生效。但这样的解释还不够清晰,实际上标准中还有一行注释:
Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
嗯,这回清楚了,对于可替换元素(如 img、input、select 等),标准并没有清晰定义,这也导致了浏览器实现的差异性。
有解决办法么?搜了一下是有的(http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements):
使用jQuery
使用 jQuery 的 before,after 方法:
javascript
$('.target').after('<img src="..." />');
实际上,jQuery 只是在目标元素前后插入 dom 而已。
伪造 content
给 img 这类标签添加 content 属性,输入一些无意义的文本,让浏览器认为标签含有 content。
如在 CSS 中添加:
css
img {
/ hide the default image /
height:0;
width:0;
/ hide fake content /
font-size:0;
color:transparent;
/ enable absolute position for pseudo elements /
position:relative;
/ and this is just fake content /
content:"I'm just fake content";
}
但这种方法存在浏览器兼容问题。
所以最后还是建议不要做这种尝试了,给父标签添加伪类吧。
转载于:https://www.cnblogs.com/goodbeypeterpan/p/9620114.html
img标签的before,after伪类相关推荐
- 详解html5新增的标签与css3中伪类和伪元素
html5 / css3 基础篇(第一篇) 回顾 是的,你没看错!今天是一个全新的开始,今天这一讲我们就要开始h5和c3了,html 和 css的基础篇我们都告一段落了.html一共两篇,css走过了 ...
- a标签的四个伪类是什么?如何排序?为什么?
爱恨分明原则: l v h a 注释:为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后 ! 注释:为了产生预期的效果,在 CSS 定义中,a ...
- 【a】标签的伪类选择器
今天我们来学习一下a标签的4个伪类选择器: ①a:link选择器:修改从未被访问过的a标签样式. ②a:visited选择器:修改已经被访问过的a标签样式. ③a:active选择器:修改链接被长按时 ...
- 前端一HTML:二十四伪类
类选择器作用:是用来给对应的类标签设置样式. 伪类也是给对应的标签设置样式.伪类选择器的样式要显示出来,这个标签就必须具备对应的条件. a:link 设置元素没有被访问过的样式. 如果已经点击了一次 ...
- (重点章节复习以及代码调整笔记)选择器:伪类和伪元素选择器(部分)
1.代码的编写除了可以把样式一样的使用同样的类选择器,还可以把各个选择器合在一起,写同样的样式语句.可以避免样式的重复书写. 例如以下可以把多个选择器写在一起. .nav-item a:hover, ...
- CSS选择器:伪类(图文详解)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式. ...
- 浏览器展示CSS伪类的动画和过渡效果应用
题记:写这篇博客要主是加深自己对浏览器展示的认识和总结实现算法时的一些验经和训教,如果有错误请指出,万分感谢. 日期:2013-5-26 起源:GBin1.com 在线演示 今天我们分享来自着名前端 ...
- 伪类选择器的简单介绍
一.伪类选择器介绍 伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...
- css中什么是伪类选择器?伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
最新文章
- 评分9.7!这本Python书彻底玩大了?程序员:真香!
- 网络报错:“The connection is not for this device.”
- IPV6地址校验(java)
- MA5680T OLT管理软件,全智能判断板卡,无人值守策略,根据光猫类型自动扫描添加光猫...
- java for循环遍历解释,三种for循环遍历
- java volatile 原子性_Java中volatile不能保证原子性的证明
- 5G iPhone,再等一年,有三款!
- 注解形式控制器 数据验证,类型转换(3)
- linux 进程 状态 ri,LINUX下解决netstat查看TIME_WAIT状态过多问题(转)
- (大数据工程师学习路径)第三步 Git Community Book----高级技能
- 浙江财经大学java试卷,关于提交2020-2021-1学期课程考核试卷的通知
- AT24C02跨页写数据
- sublime text 2 常用快捷键
- 应用HTML5 a标签下载文件
- 程序员代码面试指南:IT名企算法与数据结构题目最优解-字符串问题:C/C++语言实现
- 证明连续随机变量形式Jensen不等式
- 06540计算机网络2018年自考真题,自考06540计算机网络基本原理复习资料二
- 熔断机制什么意思_什么是熔断机制 熔断机制是什么意思
- python连接sftp下载文件及文件夹
- PAML中文文档/计算分子进化