正好看到一个用 &. 的css语句,感觉不太明白就去查了一下,感觉C站上缺少相关内容,所以这里就来补上一篇
&. 实际上是一种sass语法,在 Sass 中 & 表示父选择器的引用,可以用于创建更具体的选择器,这里给一个案例:
假设有如下的一个html结构:
<div class="container">
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
</ul>
</div>
可以使用以下的 Sass 代码来选择具有 “container” 类的 div 元素中的具有 “item” 类的 li 元素:
.container {
.item {
color: red;
}
}
这将选择具有 “item” 类的任何 li 元素,只要它们是 “container” 类的 div 元素的子元素。但是,如果只想选择具有 “item” 类的 li 元素,并且同时具有 “active” 类,则可以使用 &.active 语法:
.container {
&.active .item {
color: blue;
}
}
再举一个栗子🌰:
<div class="container">
<h1>Title</h1>
<p class="highlight">This is some highlighted text</p>
</div>
如果想将“highlight”类的样式仅应用于在“container” div内的p元素,可以使用以下Sass代码:
.container {
p.highlight {
background-color: yellow;
}
}
这将为任何具有“highlight”类且是具有“container”类的元素的子元素的p元素应用黄色背景颜色。
但是,如果只想在“container” div还具有“active”类时应用样式,则可以使用“&.active”语法,例如:
.container {
&.active {
p.highlight {
background-color: yellow;
}
}
}