CSS 中伪元素前的“&”是什么意思？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13608855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does an "&" before a pseudo element in CSS mean?
提问by neodymium
In the following CSS taken from Twitter Bootstrapwhat does the ampersand (&) character mean?
在以下取自Twitter Bootstrap 的CSS 中，与号(&) 字符是什么意思？
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}
回答by SLaks
That's LESS, not CSS.
那是LESS，而不是 CSS。
This syntax allows you nest nest selector modifiers.
此语法允许您嵌套嵌套选择器修饰符。
.clearfix {
&:before {
content: '';
}
}
Will compile to:
将编译为：
.clearfix:before {
content: '';
}
With the &, the nested selectors compile to .clearfix:before.
Without it, they compile to .clearfix :before.
使用&，嵌套选择器编译为.clearfix:before.
没有它，他们编译为.clearfix :before.
回答by anthonygore
A nested &selects the parent element in both SASS and LESS. It's not just for pseudo elements, it can be used with any kind of selector.
嵌套&选择 SASS 和 LESS 中的父元素。它不仅适用于伪元素，还可以与任何类型的选择器一起使用。
e.g.
例如
h1 {
&.class {
}
}
is equivalent to:
相当于：
h1.class {
}
回答by Ramesh kumar
Here is an SCSS/LESS example:
这是一个 SCSS/LESS 示例：
a {
text-decoration: underline;
@include padding(15px);
display: inline-block;
& img {
padding-left: 7px;
margin-top: -4px;
}
}
and its equivalent in CSS:
和它在 CSS 中的等价物：
a {
text-decoration: underline;
@include padding(15px);
display: inline-block;
}
a img {
padding-left: 7px;
margin-top: -4px;
}
