css selector 的疑惑

Question

.select {
      display: flex;
      flex: 1;
      .select-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        z-index: 101;
        &:first-child {
          .line {
            &:first-child {
              border-top: none
            }
          }
        }
        &:last-child {
          .line {
            &:last-child {
              border-top: none
            }
          }
        }
        // others

这里的第一个frist child 是等价于 select: firstChild 嘛？关于这个 & 符号代表同级，是代表 & firstChild 和 select-wrapper同级么。那么为什么我们需要新建一个select div的意义是什么。 用 setting-font-size：nth-child(2) 不能选到嘛。

谢谢～

Answer 1

扬_灵 2020-06-04 09:02:39

同学你好，是的 &:first-child 表示的是和select-wrapper同级的第一个元素 使用nth-child(n)这种方式也是可以选择到元素的 但是我们在项目中一般除了选取头部和尾部的元素我们使用伪类选择器，很少使用nth-child(n) 这种方式来选择元素，最好给元素添加类名，考虑到后期如果添加新功能在这块增加来元素，那么使用nth-child(n)获取的就可能需要更改了。如果不能解决你的问题，可以继续追问。

• 提问者 慕斯6088333 #1

  非常感谢！