引用父選擇器需要用到“&”符號

＆運算符表示嵌套規(guī)則的父選擇器，并且在修改類或偽類選擇器的應用中非常普遍

ul{li{&:nth-child(2) a {color: red;&:hover {color: yellow;}}} }//編譯為 ul li:nth-child(2) a {color: red; } ul li:nth-child(2) a:hover {color: yellow; }

&也可以用在其他場景，例如產生重復的類名

.button{&-submit{color:blue;}&-click{color:yellow;}&-btn{color:red;} } //編譯成 .button-submit {color: blue; } .button-click {color: yellow; } .button-btn {color: red; }

.item{
&1{
color:green;
}
&2{
color:red;
}
}

//編譯成 .item1 {
color: green;
}
.item2 {
color: red;
} ? .header{&>p{color:red;}& .content{color:yellow;}& div{color:red;}&~p{color:green;}&&{color:green;}&>&{color:blue;} } //編譯成 .header > p {color: red; } .header .content {color: yellow; } .header div {color: red; } .header ~ p {color: green; } .header.header {color: green; } .header > .header {color: blue; }

還可以改變選擇器的順序，將&后置，將當前的選擇器提到父級

.side{div&{color:cyan;} } #side{div&{color:green;} }ul{li{.item{div &{color:orange;}}} } ／／　編譯為 div.side {color: cyan; } div#side {color: green; } div ul li .item {color: orange; }

當多個同級選擇器用“，”隔開時，其子級使用連續(xù)多個&時，例如& &或&-&等，會生成所有可能的組合

div,p,a,li{& &{color:red;} }//編譯為 div div, div p, div a, div li, p div, p p, p a, p li, a div, a p, a a, a li, li div, li p, li a, li li {color: red; }

?

本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=hbahc1j&title=less學習三---父選擇器

總結

以上是生活随笔為你收集整理的less学习三---父选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。