在 CSS 中，伪元素前面的“ &”是什么意思？

在以下取自 Bootstrap的 CSS 中，与号(&)字符是什么意思？

.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}

183338 次浏览

小开

最佳答案

That's LESS, not CSS.

This syntax allows you to 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.

小开

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.

e.g.

h1 {
&.class {


}
}

is equivalent to:

h1.class {


}

小开

Here is an SCSS/LESS example:

a {
text-decoration: underline;
@include padding(15px);
display: inline-block;


& img  {
padding-left: 7px;
margin-top: -4px;
}
}

and its equivalent in CSS:

a {
text-decoration: underline;
@include padding(15px);
display: inline-block;
}


a img  {
padding-left: 7px;
margin-top: -4px;
}

小开

'&' is useful feature in both Sass and Less preprocessor. For nesting it's used. It is time saver when we compare to CSS.