如下示例代码,需要选中第二个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> 元素,不受其他类型子元素干扰。