在HTML & CSS中,CSS选中第二个指定类型的子元素的方法

如下示例代码,需要选中第二个img:

html 复制代码
<div id="a" class="b">
    <img src="1.jpg" loading="lazy">
    <img src="2.jpg" loading="lazy">
</div>

可以使用以下 CSS 选择器来选中第二个 <img> 元素:

css 复制代码
/* 方法一::nth-child(2) ------ 选中父元素下的第二个子元素,且必须是 img */
#a img:nth-child(2) {
  /* 样式 */
}

/* 方法二::nth-of-type(2) ------ 选中父元素下第二个 img 类型的元素(推荐,更健壮) */
#a img:nth-of-type(2) {
  /* 样式 */
}

/* 方法三:相邻兄弟选择器 ------ 选中紧跟在另一个 img 后面的 img */
#a img + img {
  /* 样式 */
}

推荐使用 :nth-of-type(2),因为它只计数 <img> 元素,不受其他类型子元素干扰。

相关推荐
代码搬运媛7 小时前
Jest 测试框架详解与实现指南
前端
counterxing7 小时前
我把 Codex 里的 Skills 做成了一个 MCP,还支持分享
前端·agent·ai编程
wangqiaowq8 小时前
windows下nginx的安装
linux·服务器·前端
之歆8 小时前
DAY_12JavaScript DOM 完全指南(二):实战与性能篇
开发语言·前端·javascript·ecmascript
发现一只大呆瓜8 小时前
Vite凭什么这么快?3分钟带你彻底搞懂 Vite 热更新的幕后黑手
前端·面试·vite
Maimai108088 小时前
React如何用 @microsoft/fetch-event-source 落地 SSE:比原生 EventSource 更灵活的实时推送方案
前端·javascript·react.js·microsoft·前端框架·reactjs·webassembly
kyriewen10 小时前
产品经理把PRD写成“天书”,我用AI半小时重写了一遍,他当场愣住
前端·ai编程·cursor
humcomm10 小时前
元框架的工作原理详解
前端·前端框架
canonical_entropy11 小时前
Attractor Before Harness: AI 大规模开发的方法论
前端·aigc·ai编程
zhangxingchao11 小时前
多 Agent 架构到底怎么选?从 Claude Agent Teams、Cognition/Devin 到工程落地原则
前端·人工智能·后端