scss-&父选择器标识符_Div+Css_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

scss-&父选择器标识符

来源：我爱模板网作者：类型：文章教程点击次数：发布时间：2021-07-24 12:15:48

　　在使用选择器嵌套的时候有一种情况需要特别注意，先看一段scss代码实例:

1.text a {
2  color: blue;
3  :hover { color: red }
4}

　　也许写此段代码目的是为了将其编译成如下css代码:

1.text a {
2  color: blue;
3}
4.text a:hover {
5  color: red;
6}

　　但是现实并非如此，它会按照选择器嵌套原则将其编译成如下css代码:

1.text a {
2  color: blue;
3}
4.text a :hover {
5  color: red;
6}

　　上面的代码实现的效果是: class为text的所有后代a标签的所有后代元素，当鼠标悬浮时，字体颜色都会变为红色。

　　这个时候就可以使用&父选择器标识符，它的作用就相当于一个父选择器的占位符。可以实现class为text的所有后代a标签的元素，当鼠标悬浮时，字体颜色都会变为红色。

1.text a {
2  color: blue;
3  &:hover { color: red }
4}

　　上面的代码编译的时候，会将&替换为父选择器a，编译后的css代码如下:

1.text a {
2  color: blue;
3}
4.text a:hover {
5  color: red;
6}

　　当然，&父选择器标识符并不仅仅用于链接伪类选择器，看如下scss代码实例:

1#content aside {
2  color: red;
3  body.ie & { color: green }
4}

　　编译为css代码如下:

`1`	`#content aside {color:` `red};`

`2`	`body.ie #content aside {` `color:` `green` `}`