IMG的伪类及其他

最新推荐文章于 2024-05-27 14:51:30 发布
原创 最新推荐文章于 2024-05-27 14:51:30 发布 · 1.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#firefox #浏览器 #blog

博主写个人Blog时考虑Firefox兼容问题，记录了两个流行浏览器间的细微区别，虽提及优快云网速及图片上传失败，但重点是Blog开发的浏览器兼容，可供他人参考。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近写了个简单的个人Blog，因为要考虑Firefox的兼容问题，注意了不少两个流行的浏览器之间的细微区别。把他们记录如下，备查，其他人也可以作为参考：

＊优快云的网速实在不敢恭维，上传图片都失败了。全文请看这里：IMG的伪类及其他

CSS中的属性选择符和结构化伪类
09-24
属性选择符和结构化伪类是CSS中较为复杂和强大的工具，允许开发者根据元素的属性和文档结构来应用样式。 属性选择符允许我们根据HTML元素的特定属性来选择和样式化这些元素。主要有以下两种类型： 1. **属性名选择...
css中利用伪类做播放效果
10-01
此外，这种技术也可以与其他CSS伪类结合起来使用，比如使用:focus伪类来实现点击后的效果，或者使用:active伪类来增加鼠标按下的反馈效果，从而进一步丰富用户的交互体验。 CSS中的:hover伪类是一种非常实用的技术...
css笔记-img-a-伪类
tz_gx的专栏
11-07 1941
img 1:单标签 行间元素，默认表现inline-block效果，直接适用盒子模型 img标签不是直接在网页中插入图像，而是指定一个链接图像文件的地址。因此 img标签创建的是被引用图像的占位空间 background-repeat repeat：默认值。背景图像在垂直方向和水平方向重复 repeat-x：背景图像在水平方向重复 repeat-y:背景图像在垂直方向重复 n
IMG标签与before,after伪类
魔侠的沙滩
03-03 1727
在CSS中总有一些你不用不知道，用到才知道的“坑”。比如今天要谈的，把 before, after 伪类用在 <img> 标签上。 嗯，实际上你用你会发现，在大多数浏览器这是无效的，dom中并不会出现你想要的结果。 为什么会这样呢？ 让我们回归到 W3C 标准中寻觅一下，在标准中，before, after 伪类的定义如： As their names indicate, the ...
img标签添加::before ::after 伪元素无效，伪元素增加:hover伪类无效
无心使然云中漫步
05-27 1784
## 1 问题 - img标签添加::before ::after 伪元素无效 - 伪元素增加:hover伪类无效 ## 2 解决 - 只能在img前后增加dom元素 - 可以这样写:hover::before{} :hover::after{}
img标签伪类不起作用
niehuang的博客
05-28 4303
伪类标签只对可以插入内容的标签添加：div span
HTML基础2--a、img、常见标签、选择符、伪类
ivan0609的专栏
05-05 705
img图片？ a链接 常见标签？ SEO知识 选择符？ 选择符优先级？
css伪类伪元素域高级选择器的介绍
09-25
### CSS伪类、伪元素与高级选择器详解 #### 一、CSS伪类与伪元素概述 CSS（层叠样式表）是一种用于控制网页样式和布局的语言，它提供了丰富的选择器来帮助开发者更加灵活地控制页面元素。其中，**伪类**和**伪元素...
第十二课 列表与伪类及光标样式-011
08-03
本节课将深入讲解CSS中的列表样式、伪类样式以及光标样式。 首先，我们来看CSS列表样式。列表在网页中常见于展示信息，如菜单、目录等。CSS提供了`list-style-type`属性来定制列表项的标志。无序列表`<ul>`默认的...
盒模型 标签a、img、list 伪类选择器 盒模型布局
weixin_34380948的博客
09-21 232
盒模型 一.盒模型概念 广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签(了解) 侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）(了解) 盒模型组成：margin + border + padding + content margin 外边距 padding 内边距 border控制边框 content控制内容 margin+padding 控制...
CSS实用技巧：伪元素/伪类的妙用
flying meng的菜鸟居
08-15 6993
在一个网页中CSS占着非常重要的地位。近年来随着CSS的发展，伪元素/伪类也开始被大量应用：在性能愈加被看中的当下，处于文档流之外的CSS伪元素/伪类是当之无愧的“无冕之王”！ 下面笔者总结的一些关于CSS的“骚操作”，希望能对你产生帮助： :hover和:focus显示浮层 我们完全可以只用CSS的父子选择器（用于“父子嵌套”）/兄弟选择器（用于“同级并列排列”）+伪类 :hover 实现【当鼠标滑入显示xxx】，甚至不用JS！ 比如：当鼠标滑入链接时显示图片 <a href="javascrip
CSS3 选择器——伪类选择器
ssisse的博客
04-20 670
本文转自：http://www.w3cplus.com/css3/pseudo-class-selector 伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法，最后把重心放到CSS3新增加的":nth-child"选择器的使用方法。 一
给image覆盖水印：after伪元素
_NIXIAKF的博客
10-14 891
使用伪元素给图片加水印；对img标签使用after和before伪元素失效
前端每日感想
weixin_59124055的博客
05-10 336
2022年5月10日18:00:11 千万不要再用img挂载::after或::before伪类了，有的浏览器不生效的。。 根本原因是伪类的content一定要是根据挂载元素的内容走的，像div，section等的内容走，而img是没有内容的，我们看到的图片其实也不是img的内容，而是这个元素本身，所以在img标签上挂载伪类不生效。但是有的浏览器又会生效，这种浏览器间的解释不统一通常会造成一些bug。 ...
before、after伪类用在＜img＞标签上失效的问题
qq_41161604的博客
06-04 1615
参考链接 https://www.w3.org/TR/CSS21/generate.html#before-after-content 问题 before、after伪类用在标签上失效 原因 before和:after伪元素指定生成内容的样式和位置。正如它们的名称所示，:before和:after伪元素指定了document tree content内容之前和之后的内容位置。content属性与这些伪元素一起指定要插入的内容。 文中的document tree content，对于 img 这种单标签，
伪类中（：before 为例）添加添加图片方法
热门推荐
稻草人
04-23 4万+
a --> h1:before { content: " "; display: block; height: 40px; width: 40px; background: url(img/CSU001.jpg) no-repeat; background-size: 100%; } a heading a paragraph. a paragr
伪类实现图片膨胀
只作为个人备忘录
01-31 750
div{ width:280px; height:156px; border:1px solid red; margin:100px auto; overflow:hidden ; } img{ vertical-align:top; transition:all 2s; width:280px; height:156px; }
关于一些伪类无法生效的情况
百岁如流富贵冷灰的博客
06-07 3468
今天在写代码的时候发现的一个关于多层次伪类无法生效的问题1.类似.class1 .class2:after{}这样的伪类是无法生效的，需要改成.class2:after{}  但是众所周知，对于：hover这样的伪类就不存在这样的问题2. 例如： .mx_table tbody tr:nth-child(odd){background:#355382;} .mx_table tbody tr:n...
伪类和伪元素区别
最新发布
06-07
我们已经了解了用户的需求，他想要了解CSS中伪类和伪元素的区别及用法。根据之前的对话历史，用户已经看到了一些关于伪类和伪元素的引用内容，现在需要我进行更清晰的解释和总结。首先，回顾一下引用内容：引用[1]...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值