在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> 元素,不受其他类型子元素干扰。

相关推荐
lichenyang45319 小时前
Docker 学习笔记(一):为什么需要镜像、容器和仓库?
前端
kyriewen19 小时前
别再对着 TypeScript 报错发呆了:我把 10 个最常见的红色波浪线翻译成了人话
前端·javascript·typescript
IT_陈寒19 小时前
SpringBoot自动配置的坑,我的API突然就404了
前端·人工智能·后端
奇奇怪怪的20 小时前
Embedding 模型 10+ 横向评测
前端
陈广亮20 小时前
Monorepo 从 0 到 1 实操指南 2026 版:pnpm catalogs + Turborepo 2.x + changesets 全链路
前端
子兮曰20 小时前
OpenMontage 深度解剖:你的 AI 编程助手,其实是个视频工作室
前端·后端·ai编程
敲代码的鱼20 小时前
PDF 预览与签名批注写回 支持安卓 iOS 鸿蒙 UTS插件
android·前端·ios
子兮曰20 小时前
前端工具链的「Rust 化」:一场没有赢家的军备竞赛?
前端·后端·rust
Hyyy21 小时前
Function Calling / Tool Use的原理和实现模式
前端·llm·ai编程