Question

上一个章节中我们学习了属性的合并，这个章节我们学习一个有关选择器的操作 – 父选择器。

其功能与其名称相同，就是用符号代表其父选择器。

1. 语法定义

官方定义： Referencing parent selectors with & 。

慕课解释： 用 ＆ 符号引用父选择器。

2. 语法详情

在嵌套结构中 & 表示父选择器。比如：

a {
  color: blue;
  &:hover {
    color: green;
  }
}

在上述代码中，:hover 前面加上了 & 符号，编译后则等同于 a:hover 。

输出代码如下：

a {
  color: blue;
}

a:hover {
  color: green;
}

嵌套结构中默认编译规则为 .parentSelector .childSelector ，即父选择器和子选择器之间使用空格分隔开的。

所以在未添加 & 的情况下， :hover 输出的样式选择器会是 a :hover ， 这与我们预期的结果是不一致的。

3. 使用场景

使用 & 运算符可以满足我们使用默认规则以外的其他方式组合嵌套的需求，在修改类或伪类并应用于现有选择器时最常用。

4. 示例

4.1 多个 & 组合

我们可以使用多个 & 运算符并使用其他运算符连接起来，便于重复引用父选择器而无需重复其名称。

• 输入代码

.link {
  & , & {
    color: red;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}

• 输出代码

.link , .link {
  color: red;
}

.link.link {
  color: blue;
}

.link, .linkish {
  color: cyan;
}

4.2 更改选择器顺序

在某些情况下我们需要将选择器放在继承的（父）选择器之前。 此时可以通过将 & 运算符放在当前选择器后面来完成。

• 输入代码

.header {
  border-radius: 5px;
  .no-borderradius & {
    background-image: url('images/button-background.png');
  }
}

• 输出代码

.header {
  border-radius: 5px;
}

.no-borderradius .header {
  background-image: url('images/button-background.png');
}

4.3 排列组合

& 运算符可用于生成逗号分隔列表中选择器的所有可能的排列组合。

• 输入代码

p, a, ul, li {
  border-top: 2px dotted #366;
  & + & {
    border-top: 0;
  }
}

将会输出所有可能的 16 中排列组合。

• 输出代码

p,
a,
ul,
li {
  border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
  border-top: 0;
}

Tips

在嵌套结构中，＆ 运算符代表所有父选择器，而不仅仅是最接近的父选择器，比如：

• 输入代码

.grand {
  .parent {
    & > & {
      color: red;
    }
  }
}

上述代码中的 & 运算符不仅仅指的是 .parent 这个父选择器，而是 .grand .parent 。

• 输出代码

.grand .parent > .grand .parent {
  color: red;
}

小结

这个章节我们介绍了父选择器的使用，父选择器就是用 & 符号去表示所在区域的父选择器，是一种父选择器的替代写法，可以组合出多种使用方法。