为什么使用:nth-child(1)选择器选中元素后宽高属性不生效？

问题根源 #

1. 你当前的.home:nth-child(1)选择器命中的是<body>下第一个子元素且类为home的div容器，并非容器内的img标签。你看到的定位生效实际是div的位置发生了偏移，div的宽高属性本身已经生效，但img作为可替换元素默认不会继承父容器的宽高，会按原始尺寸渲染，溢出父容器，所以看起来像是宽高没生效。
2. 如果你原本的需求是用:nth-child选中img设置属性，当前的选择器匹配目标完全错误。

解决方案（均保留:nth-child用法） #

方案1：调整选择器直接命中img #

直接匹配.home下的第一个img元素设置属性，适合需要直接控制img样式的场景：

.home {
    position: absolute;
    left: 9.4rem;
    top: 16.4rem;
}
/* 选中.home下第一个子元素img */
.home img:nth-child(1) {
    height: 41.8rem;
    width: 27.8rem;
    /* 如果需要调整img的位置可以加position: relative/absolute配合定位属性 */
}

方案2：保留现有选择器逻辑，新增img填充规则 #

如果确实需要先给div设尺寸，只需新增规则让img自动填充父容器即可：

.home {
    position: absolute;
}
.home:nth-child(1) {
    height: 41.8rem;
    left: 9.4rem;
    top: 16.4rem;
    width: 27.8rem;
}
/* 让img自适应父容器尺寸 */
.home img {
    width: 100%;
    height: 100%;
    /* 可选增加object-fit: cover; 避免图片拉伸变形，保留内容比例 */
}

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