sass - SCSS中特定子选择器不生效的问题？

Question

scss 第二个子选择器失效问题

有如下代码,它无法按照预期运行：
html:

<div class="top-info">
  <div></div>
  <span>无床位</span>
  <div></div>
  <span>有床位</span>
</div>

scss:

.top-info{
  color: $fontColor;
  >div{
    width: .75rem;
    height: .75rem;
  }
  >div:first-child{
    background-color: $withoutBed;
  }
  >div:nth-child(2){
    background-color: $hasBed;
  }
 }

但若改成：

scss：
.top-info{
  color: $fontColor;
  >div{
    width: .75rem;
    height: .75rem;
  }
  >div:first-child{
    background-color: $withoutBed;
  }
  >div:nth-child(n+2){
    background-color: $hasBed;
  }
 }

它便生效了！（顺带一提，使用last-child也没有生效，!important也试过，应该不是优先级问题)，有大佬知道是什么原因吗？

Answer 1

nth-child用错了，nth-child(2)是匹配父元素的第二个元素，如果前面有元素名，再匹配对应的元素名对不对，所以，他是双重匹配，而不是先过滤再匹配。类似的选择器，可以换用nth-of-type。

这种需求，最好的做法是给div加上class，使用class设置样式，不然dom结构变化，css就失效了

Answer 2

在 SCSS（或 CSS）中，当你使用子选择器（>）时，它只会选择直接子元素。在你的 HTML 结构中，div 元素是 .top-info 的直接子元素，但 span 元素也是 .top-info 的直接子元素，它们会中断 div 元素在 :nth-child 选择器中的计数。

问题分析

在你的第一个 SCSS 示例中：

.top-info{
  // ...
  >div:nth-child(2){
    background-color: $hasBed;
  }
}

这里 :nth-child(2) 实际上尝试选择 .top-info 的第二个直接子元素，但根据 HTML 结构，第二个直接子元素是一个 span，而不是 div。因此，这个选择器不会匹配任何 div 元素。

解决方案

你的第二个 SCSS 示例之所以能够工作，是因为你使用了 :nth-child(n+2)，这个选择器匹配从第二个元素开始的所有子元素（在这个上下文中，就是第二个和第三个直接子元素，它们都是 div）。但这并不是最精确的选择方法，因为它也包含了后续可能存在的其他类型的子元素。

为了更精确地选择 .top-info 下的第二个和之后的 div 子元素，你可以使用 :nth-of-type() 选择器，它只考虑特定类型的元素：

.top-info{
  color: $fontColor;
  >div{
    width: .75rem;
    height: .75rem;
  }
  >div:first-child{
    background-color: $withoutBed;
  }
  >div:nth-of-type(n+2){
    background-color: $hasBed;
  }
}

这里 :nth-of-type(n+2) 正确地选择了 .top-info 中的第二个及之后的所有 div 子元素，不受其他类型子元素（如 span）的影响。

总结

• 使用 :nth-child() 时，要考虑到它计算的是所有类型的子元素。
• 使用 :nth-of-type() 可以更精确地基于元素类型来选择子元素。
• 在你的情况下，:nth-of-type(n+2) 是更合适的选择器。