css selector 的疑惑

来源：4-5 字号设置 UI 实现

慕斯6088333

2020-06-04

.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) 不能选到嘛。

谢谢～

写回答

1回答

扬_灵

2020-06-04

已采纳

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

慕斯6088333

非常感谢！

2020-06-04

共1条回复

Vue 实战商业级读书Web APP完整项目

Vue全家桶+最新前端技术+前后端分离架构，完整项目流程

1623 学习 · 1951 问题

查看课程

相似问题

求vscode关于css自动识别并提示class类名的插件

回答 1

我的所有scss都会被编译很多css文件