一盖灸、認(rèn)識“&”
在css中蚁鳖，“&”符號通常用于選擇器中，表示選擇某個元素的子元素或特定狀態(tài)下的元素.
二赁炎、“&”的用法
1醉箕、&- ：連接父元素和子元素的類名
用法：
.btn {
&-primary {
background-color: #007bff;
color: #fff;
}
}
編譯出來的結(jié)果是在btn后面拼接了類名:
.btn-primary {
background-color: #007bff;
color: #fff;
}
2、&. ：連接父元素和子元素的類名
用法：
.btn {
&.primary {
background-color: #007bff;
color: #fff;
}
}
編譯出來的結(jié)果是同一個元素徙垫，有兩個類名讥裤，兩個類名之間沒有空格：
.btn.primary {
background-color: #007bff;
color: #fff;
}
3、&::before和&::after ：表示在當(dāng)前元素的前面或后面插入偽元素
btn {
&::before {
content: "before";
}
&::after {
content: "after";
}
}
4姻报、&:hover和&:focus：表示鼠標(biāo)懸停或聚焦時應(yīng)用的樣式
btn {
&:hover {
background-color: #eee;
}
&:focus {
outline: none;
box-shadow: 0 0 0 2px #007bff;
}
編譯后的結(jié)果是當(dāng)用戶懸停在 button 元素上時己英，應(yīng)用 background-color: #eee; 樣式；當(dāng)用戶聚焦在 button 元素上時吴旋，應(yīng)用 outline: none; box-shadow: 0 0 0 2px #007bff; 樣式损肛。
5、&[attribute=value] ：表示選擇具有特定屬性和屬性值的元素
用法：
btn {
&[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
&[type="submit"] {
background-color: #007bff;
color: #fff;
}
}
編譯出來的結(jié)果是選擇具有 disabled 屬性的 button 元素荣瑟，并應(yīng)用 opacity: 0.5; cursor: not-allowed; 樣式治拿；同時選擇具有 type="submit" 屬性的 button 元素，并應(yīng)用 background-color: #007bff; color: #fff; 樣式：
button[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
button[type="submit"] {
background-color: #007bff;
color: #fff;
}
6笆焰、&:nth-child(n)和&:nth-of-type(n)：表示選擇特定位置的子元素或同類型元素
ul {
li {
&:nth-child(odd) {
background-color: #f7f7f7;
}
&:nth-of-type(even) {
color: #007bff;
}
}
}
7劫谅、&:first-child 選擇器用來匹配父元素中第一個子元素。
&:last-child 選擇器用來匹配父元素中最后一個子元素嚷掠。
