SCSS中特定子选择器不生效的问题?-灵析社区

我买了30万的鞋子

scss 第二个子选择器失效问题 有如下代码,它无法按照预期运行: html: 无床位 有床位 scss: .top-info{ color: $fontColor; >div{ width: .75rem; height: .75rem; } >div:first-child{ background-color: $withoutBed; } >div:nth-child(2){ background-color: $hasBed; } } ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240918/dd0477deac79d19a4eee98c39b86d03a.png) 但若改成: scss: .top-info{ color: $fontColor; >div{ width: .75rem; height: .75rem; } >div:first-child{ background-color: $withoutBed; } >div:nth-child(n+2){ background-color: $hasBed; } } ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240918/f39dbbe82746775d09c0070fd2429d35.png) 它便生效了!(顺带一提,使用last-child也没有生效,!important也试过,应该不是优先级问题),有大佬知道是什么原因吗?

阅读量:208

点赞量:0

问AI
你可以的拿捏了
nth-child用错了,nth-child(2)是匹配父元素的第二个元素,如果前面有元素名,再匹配对应的元素名对不对,所以,他是双重匹配,而不是先过滤再匹配。类似的选择器,可以换用nth-of-type。 这种需求,最好的做法是给div加上class,使用class设置样式,不然dom结构变化,css就失效了