引用父選擇器需要用到“&”符號(hào)

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

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; }

&也可以用在其他場(chǎng)景，例如產(chǎn)生重復(fù)的類(lèi)名

.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; }

還可以改變選擇器的順序，將&后置，將當(dāng)前的選擇器提到父級(jí)

.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; }

當(dāng)多個(gè)同級(jí)選擇器用“，”隔開(kāi)時(shí)，其子級(jí)使用連續(xù)多個(gè)&時(shí)，例如& &或&-&等，會(huì)生成所有可能的組合

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; }

?

本文轉(zhuǎn)載于:猿2048https://www.mk2048.com/blog/blog.php?id=hbahc1j&title=less學(xué)習(xí)三---父選擇器

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。