如何使用nth-child属性修改background-image？附HTML场景说明

没问题，我来帮你搞定这个需求！根据你的描述，.contenedor容器里会有3个重复的.row元素，我们可以利用CSS的:nth-child()伪类精准定位每个.row，给它们设置不同的background-image。

具体实现步骤： #

1. 先给所有.row设置基础背景样式
   为了让背景图显示效果统一，先给所有.row添加通用的背景属性，比如控制背景图的缩放、位置和重复方式，同时设置最小高度确保背景图能正常展示：

   .contenedor .row {
     background-size: cover; /* 让背景图覆盖整个元素 */
     background-position: center; /* 背景图居中显示 */
     background-repeat: no-repeat; /* 禁止背景图重复 */
     min-height: 300px; /* 根据你的需求调整高度，确保背景图可见 */
     /* 可根据需要添加其他样式，比如padding、margin等 */
   }
   

2. 用:nth-child()分别定位每个.row并设置背景图
   因为.row是.contenedor的直接子元素，我们可以通过:nth-child(n)来选中第n个.row，然后给每个元素设置对应的背景图：

   /* 第1个.row的背景图 */
   .contenedor .row:nth-child(1) {
     background-image: url('你的第一张图片路径.jpg');
   }
   
   /* 第2个.row的背景图 */
   .contenedor .row:nth-child(2) {
     background-image: url('你的第二张图片路径.jpg');
   }
   
   /* 第3个.row的背景图 */
   .contenedor .row:nth-child(3) {
     background-image: url('你的第三张图片路径.jpg');
   }
   

注意事项： #

• 替换代码中的你的第一张图片路径.jpg等为你实际的图片地址，支持相对路径或绝对路径。
• 如果.contenedor内部除了.row还有其他直接子元素，那:nth-child()的计数会包含这些元素，这种情况下可以改用:nth-of-type()，比如.contenedor .row:nth-of-type(1)，这样只会计数.row类型的子元素。
• 如果需要给.row内部的其他元素（比如.contorno）设置背景图，只需要修改选择器为.contenedor .row:nth-child(1) .contorno即可。

内容的提问来源于stack exchange，提问作者davigzzz