less中使用&:first-child的知识点

 

& 也代表父选择器的引用，可以继续使用 & 来引用父级选择器，但要确保正确地应用 :first-child 伪类。

.titleLeft {
  width: 70%;
  display: flex;
  align-items: center;

  &:first-child {
    margin-right: 20px;
  }
}

 

解释：

• &:first-child 代表 .titleLeft 元素本身的第一个子元素。
• LESS 会自动处理 &，并将它编译为 .titleLeft:first-child，即选择 .titleLeft 的第一个子元素。

注意：

• 如果 .titleLeft 本身并不是其父元素的第一个子元素（例如，.titleLeft 是其他元素的子元素），那么 &:first-child 是无效的。&:first-child 会尝试选择 .titleLeft 元素本身作为父元素的第一个子元素，而不是 .titleLeft 内的第一个子元素。
• 如果你的目标是选中 .titleLeft 元素下的第一个子元素，则应使用 :first-child 选择器并且不加 &。

 

修正后的代码（选中 .titleLeft 下的第一个子元素）：

.titleLeft {
  width: 70%;
  display: flex;
  align-items: center;

  > :first-child {
    margin-right: 20px;
  }
}

解释：

• > :first-child 会选择 .titleLeft 下的第一个子元素，并应用 margin-right: 20px。
• > 是子选择器，确保选中的是 .titleLeft 的直接子元素，而不是嵌套的子元素。

总结：

• LESS 允许使用 & 来引用父选择器，但需要根据你想要实现的选择进行调整。
• 如果要选择 .titleLeft 元素下的第一个子元素，应该使用 > :first-child。