为什么在预处理器中:hover要添加&符号

在使用 CSS 预处理器（如 Sass、Less、Stylus）时，为什么 :hover 等伪类选择器前面需要加上 & 符号才能正确生效。这是因为预处理器中的嵌套规则导致的。

理解 CSS 预处理器的嵌套

CSS 预处理器允许你以嵌套的方式编写 CSS 规则，这使得代码更加清晰和易于维护。例如，在 Sass 中，你可以这样写：

SCSS

.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;

      a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: #333;
      }
    }
  }
}

这段 Sass 代码会被编译成如下的 CSS：

CSS

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav ul li {
  display: inline-block;
}
.nav ul li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

可以看到，嵌套的规则会被展开成后代选择器。

& 符号的作用

& 符号在 CSS 预处理器中代表“父选择器”。它允许你引用当前选择器的父级。这在处理伪类、伪元素以及其他需要与父选择器关联的情况时非常有用。

为什么 :hover 前要加 &

如果不加 &，直接写 :hover，预处理器会将其解释为当前选择器的后代，而不是当前选择器自身的状态。

例如，如果你这样写：

SCSS

.link {
  color: blue;
  :hover { // 错误写法
    color: red;
  }
}

这段 Sass 代码会被编译成：

CSS

.link :hover { /* 错误：选择的是 .link 内部的 hover 元素，而不是 .link 自身 hover 时的状态 */
  color: red;
}

这会导致 hover 效果不起作用，因为你的 HTML 结构中通常不会有 .link 元素内部包含其他元素的结构，并且这些元素又具有 hover 状态。

正确的写法是使用 &：

SCSS

.link {
  color: blue;
  &:hover { // 正确写法
    color: red;
  }
}

这段 Sass 代码会被编译成：

CSS

.link:hover { /* 正确：选择的是 .link 自身 hover 时的状态 */
  color: red;
}

这样，当鼠标悬停在 .link 元素上时，颜色就会变成红色。

& 的其他用法

& 符号不仅可以用于伪类，还可以用于伪元素、属性选择器、类名拼接等场景：

• 伪元素：

  SCSS

  .element {
    &::before {
      content: "";
    }
  }
  

• 属性选择器：

  SCSS

  input {
    &[type="text"] {
      border: 1px solid #ccc;
    }
  }
  

• 类名拼接：

  SCSS

  .btn {
    &-primary {
      background-color: blue;
    }
    &-secondary {
      background-color: gray;
    }
  }
  

总结

在 CSS 预处理器中，& 符号用于引用父选择器。在处理 :hover 等伪类选择器时，必须使用 & 才能正确地将样式应用到当前选择器自身，而不是其后代元素。理解 & 的作用是掌握 CSS 预处理器的关键之一。