HTML-为什么：nth-child（1）不更改高度和宽度？-堆栈溢出

顺晟科技

2022-10-18 14:01:46

182

我可以使用第n个子选择器更改并应用img标记的左侧和顶部位置值，但没有应用高度和宽度值。我知道第n个孩子的选择是正确的，但为什么没有应用高度和宽度。

我正在做一个SCSS项目，然后发生了同样的问题。所以我试着用普通的HTML和CSS重新创建它。又发生了。

谁能解释一下我在这里做错了什么。谢谢.

注意：我确实需要让nth-child()选择器在这里工作！

<代码>.主页{位置：绝对；}.首页：第N个孩子（1）{身高：41.8rem；左：9.4rem；顶部：16.4rem；宽度：27.8rem；}

<代码><；！文档类型HTML>；<；HTML Lang=“ en ”>；<；头部>；<；元字符集=“ UTF-8 ”>；<；meta HTTP-equiv=“ X-ua-compatible ” content=“ ie=edge ”>；<；meta name=“ viewport ” content=“ width=device-width，initial-scale=1.0 ”>；<；标题>；文档<；/标题>；<；link rel=“ stylesheet ” href=“ styles.CSS ”>；<；/标题>；<；身体>；<；DIV类=“ home ”>；<；IMG SRC=“ https：//imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_02_l.jpg ” alt=“ ” amp；gt；<；/DIV>；<；/正文>；<；/HTML>；

顺晟科技：

您需要为选择器.home { position: absolute; } .home:nth-child(1) { height: 41.8rem; left: 9.4rem; top: 16.4rem; width: 27.8rem; }

例如，通常情况下，如果您编写为<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="home"> <img src="https://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_02_l.jpg" alt=""> </div> </body> </html>，则表示当hover具有属性时，DIV.home.有了空间，就意味着孩子在家里

。

<代码>.主页{位置：绝对；}.首页：第N个孩子（1）{高度：40px；左：9.4rem；顶部：16.4rem；宽度：27.8rem；}

<代码><；！文档类型HTML>；<；HTML Lang=“ en ”>；<；头部>；<；元字符集=“ UTF-8 ”>；<；meta HTTP-equiv=“ X-ua-compatible ” content=“ ie=edge ”>；<；meta name=“ viewport ” content=“ width=device-width，initial-scale=1.0 ”>；<；标题>；文档<；/标题>；<；link rel=“ stylesheet ” href=“ styles.CSS ”>；<；/标题>；<；身体>；<；DIV类=“ home ”>；<；IMG SRC=“ https：//imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_02_l.jpg ” alt=“ ” amp；gt；<；/DIV>；<；/正文>；<；/HTML>；

上一篇：JavaScript-每个（不同）类下一篇：HTML-通过API将数据导入H2-

网站建设

Html

HTML-为什么：nth-child（1）不更改高度和宽度？-堆栈溢出