IMG的伪类及其他

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

#firefox #浏览器 #blog

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

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

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

img标签添加::before ::after 伪元素无效，伪元素增加:hover伪类无效
无心使然云中漫步
05-27 1920
## 1 问题 - img标签添加::before ::after 伪元素无效 - 伪元素增加:hover伪类无效 ## 2 解决 - 只能在img前后增加dom元素 - 可以这样写:hover::before{} :hover::after{}
CSS中的属性选择符和结构化伪类
09-24
属性选择符和结构化伪类是CSS中较为复杂和强大的工具，允许开发者根据元素的属性和文档结构来应用样式。 属性选择符允许我们根据HTML元素的特定属性来选择和样式化这些元素。主要有以下两种类型： 1. **属性名选择...
css笔记-img-a-伪类
tz_gx的专栏
11-07 1968
img 1:单标签 行间元素，默认表现inline-block效果，直接适用盒子模型 img标签不是直接在网页中插入图像，而是指定一个链接图像文件的地址。因此 img标签创建的是被引用图像的占位空间 background-repeat repeat：默认值。背景图像在垂直方向和水平方向重复 repeat-x：背景图像在水平方向重复 repeat-y:背景图像在垂直方向重复 n
IMG标签与before,after伪类
魔侠的沙滩
03-03 1767
在CSS中总有一些你不用不知道，用到才知道的“坑”。比如今天要谈的，把 before, after 伪类用在 <img> 标签上。 嗯，实际上你用你会发现，在大多数浏览器这是无效的，dom中并不会出现你想要的结果。 为什么会这样呢？ 让我们回归到 W3C 标准中寻觅一下，在标准中，before, after 伪类的定义如： As their names indicate, the ...
img标签伪类不起作用
niehuang的博客
05-28 4314
伪类标签只对可以插入内容的标签添加：div span
HTML基础2--a、img、常见标签、选择符、伪类
ivan0609的专栏
05-05 718
img图片？ a链接 常见标签？ SEO知识 选择符？ 选择符优先级？
css中利用伪类做播放效果
10-01
此外，这种技术也可以与其他CSS伪类结合起来使用，比如使用:focus伪类来实现点击后的效果，或者使用:active伪类来增加鼠标按下的反馈效果，从而进一步丰富用户的交互体验。 CSS中的:hover伪类是一种非常实用的技术...
css伪类伪元素域高级选择器的介绍
09-25
### CSS伪类、伪元素与高级选择器详解 #### 一、CSS伪类与伪元素概述 CSS（层叠样式表）是一种用于控制网页样式和布局的语言，它提供了丰富的选择器来帮助开发者更加灵活地控制页面元素。其中，**伪类**和**伪元素...
盒模型 标签a、img、list 伪类选择器 盒模型布局
weixin_34380948的博客
09-21 249
盒模型 一.盒模型概念 广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签(了解) 侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）(了解) 盒模型组成：margin + border + padding + content margin 外边距 padding 内边距 border控制边框 content控制内容 margin+padding 控制...
CSS实用技巧：伪元素/伪类的妙用
flying meng的菜鸟居
08-15 7041
在一个网页中CSS占着非常重要的地位。近年来随着CSS的发展，伪元素/伪类也开始被大量应用：在性能愈加被看中的当下，处于文档流之外的CSS伪元素/伪类是当之无愧的“无冕之王”！ 下面笔者总结的一些关于CSS的“骚操作”，希望能对你产生帮助： :hover和:focus显示浮层 我们完全可以只用CSS的父子选择器（用于“父子嵌套”）/兄弟选择器（用于“同级并列排列”）+伪类 :hover 实现【当鼠标滑入显示xxx】，甚至不用JS！ 比如：当鼠标滑入链接时显示图片 <a href="javascrip
CSS3 选择器——伪类选择器
ssisse的博客
04-20 747
本文转自：http://www.w3cplus.com/css3/pseudo-class-selector 伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法，最后把重心放到CSS3新增加的":nth-child"选择器的使用方法。 一
给image覆盖水印：after伪元素
_NIXIAKF的博客
10-14 919
使用伪元素给图片加水印；对img标签使用after和before伪元素失效
前端每日感想
weixin_59124055的博客
05-10 349
2022年5月10日18:00:11 千万不要再用img挂载::after或::before伪类了，有的浏览器不生效的。。 根本原因是伪类的content一定要是根据挂载元素的内容走的，像div，section等的内容走，而img是没有内容的，我们看到的图片其实也不是img的内容，而是这个元素本身，所以在img标签上挂载伪类不生效。但是有的浏览器又会生效，这种浏览器间的解释不统一通常会造成一些bug。 ...
before、after伪类用在＜img＞标签上失效的问题
qq_41161604的博客
06-04 1656
参考链接 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
css：利用伪类处理图片加载失败的样式问题
彭世瑜的博客
09-30 1060
【代码】css：利用伪类处理图片加载失败的样式问题。
伪类实现图片膨胀
只作为个人备忘录
01-31 763
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; }
在python中通过正则表达式把img标签中的src路径匹配出来
sdadaaagfsee3的博客
09-23 6043
str1 = ‘’’ ‘’’ pattern = re.compile(‘src = '"[’"]’) #要有空格隔开 才会有输出结果 str2 = pattern.findall(str1) print(str2) 在没用空格隔开之前一直输出空串是因为写的img标签中的字符串就是用空格隔开的，如果不用空格隔开的话会导致匹配结果失败 ...
伪类和伪元素区别
最新发布
06-07
<think>我们已经了解了用户的需求，他想要了解CSS中伪类和伪元素的区别及用法。根据之前的对话历史，用户已经看到了一些关于伪类和伪元素的引用内容，现在需要我进行更清晰的解释和总结。首先，回顾一下引用内容：引用[1]提到伪类和伪元素是两种不同的选择器，伪类用于定义元素的特殊状态，而伪元素用于创建和样式化不在文档树中的元素。引用[2]详细解释了伪元素和伪类的区别，并指出：-伪类根据状态改变元素样式，是对选择器的扩展；-伪元素则是在逻辑上创建虚拟的新元素，可以给新元素添加样式。-伪类使用单冒号，伪元素在CSS3中引入了双冒号（但也支持单冒号），建议使用双冒号以区分。-一个选择器可以同时使用多个伪类，但只能使用一个伪元素（多个伪元素无效）。引用[3]再次强调了伪类的作用：选择HTML元素的特定状态或位置，应用特殊样式。因此，我的回答需要整合这些信息，并清晰地分点说明两者的区别，同时给出用法示例。计划结构：1.定义伪类：解释伪类的概念，举例说明常用伪类（如:hover,:active,:nth-child等），以及它们的作用（改变元素在特定状态下的样式）。2.定义伪元素：解释伪元素的概念，举例说明常用伪元素（如::before,::after,::first-line等），以及它们的作用（创建虚拟元素并设置样式）。3.主要区别：从作用、语法、使用限制等方面对比。4.用法示例：用代码展示两者不同的使用场景。需要注意的是，在CSS3中，为了区分伪类和伪元素，规定伪元素使用双冒号（::），而伪类使用单冒号（:）。但为了兼容旧的写法，伪元素也可以使用单冒号，但推荐使用双冒号。另外，根据引用[2]中的例子，说明选择器可以同时使用多个伪类（如div:first-child:hover），而伪元素不能连续使用（如.province::before::first-letter无效）。最后，生成相关问题供用户进一步学习。注意：回答中引用的内容要添加引用标识。</think> ### CSS伪类与伪元素的区别及用法详解 #### 一、核心概念差异 1. **伪类（Pseudo-classes）** - 作用：基于元素的状态或位置进行选择 - 语法：使用单冒号`:`（如`:hover`、`:active`） - 本质：选择**已存在元素**的特殊状态 - 示例： ```css /* 鼠标悬停状态 */ a:hover { color: red; } /* 访问过的链接 */ a:visited { color: purple; } /* 第一个子元素 */ li:first-child { font-weight: bold; } ``` 2. **伪元素（Pseudo-elements）** - 作用：创建**不在文档树中的虚拟元素** - 语法：使用双冒号`::`（如`::before`、`::first-line`） - 本质：生成并样式化**新的虚拟元素** - 示例： ```css /* 在元素前插入内容 */ p::before { content: "▶"; color: green; } /* 选择首行文本 */ article::first-line { font-variant: small-caps; } ``` #### 二、关键区别总结 | **特性** | 伪类 | 伪元素 | |------------------|-------------------------------|----------------------------| | 选择目标 | 选择**已有元素**的特定状态 | 创建**新的虚拟元素** | | 语法 | 单冒号 `:`（如`:hover`） | 双冒号 `::`（如`::before`） | | 可叠加性 | 可多个组合（如`:hover:active`）| 不可叠加（如`::before::after`无效）[^2] | | DOM表现 | 不修改DOM结构 | 在渲染层创建虚拟节点 | | 典型应用 | 交互状态、结构选择 | 装饰性内容、文本片段控制 | #### 三、使用场景对比 1. **伪类典型场景** ```css /* 表单元素状态 */ input:disabled { opacity: 0.5; } /* 子元素位置选择 */ tr:nth-child(odd) { background: #eee; } /* 用户交互反馈 */ button:active { transform: scale(0.98); } ``` 2. **伪元素典型场景** ```css /* 添加装饰性内容 */ blockquote::after { content: "”"; font-size: 2em; } /* 首字母下沉效果 */ p::first-letter { font-size: 200%; float: left; } /* 自定义选中文本样式 */ ::selection { background: yellow; color: black; } ``` #### 四、混合使用示例 ```css /* 组合使用：悬停时在链接前添加图标 */ a:hover::before { content: "→ "; color: blue; } /* 首个子元素的首行文本 */ article:first-child::first-line { letter-spacing: 1px; } ``` > **语法最佳实践**： > 虽然浏览器支持单冒号伪元素（如`:before`），但根据CSS3规范建议： > - 伪类**始终用** `:`（如`:nth-child()`） > - 伪元素**始终用** `::`（如`::first-letter`） > 以明确区分两者，提高代码可读性[^2]。 #### 五、注意事项 1. **不可堆叠限制**：伪元素不能连续使用（如`div::before::after`无效） 2. **内容属性要求**：`::before`/`::after`必须定义`content`属性（空值也需设置：`content: ""`） 3. **表单元素限制**：伪元素在`<input>`、`<img>`等替换元素上部分效果受限 4. **可访问性考量**：伪元素内容不会被屏幕阅读器识别，重要内容需使用真实DOM
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值