less學(xué)習(xí)三---父選擇器

Integ 發(fā)布于2019-04-23 13:27 / 3802人閱讀

摘要：引用父選擇器需要用到符號(hào)運(yùn)算符表示嵌套規(guī)則的父選擇器，并且在修改類(lèi)或偽類(lèi)選擇器的應(yīng)用中非常普遍編譯為也可以用在其他場(chǎng)景，例如產(chǎn)生重復(fù)的類(lèi)名編譯成編譯成編譯成還可以改變選擇器的順序，將后置，將當(dāng)前的選擇器提到父級(jí)編譯為當(dāng)

引用父選擇器需要用到“&”符號(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;
}

云服務(wù)器 GPU云服務(wù)器華三云服務(wù)器的選擇選擇器派生選擇器省市選擇器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1895.html

相關(guān)文章

談?wù)凜SS預(yù)處理器

摘要：變量插值預(yù)處理器中定義的變量不僅可以用作屬性值，還可以用作選擇器，屬性名等，這就是變量插值。三種預(yù)處理器的嵌套語(yǔ)法是一致的，引用父級(jí)選擇器的標(biāo)記也相同。三種預(yù)處理器的使用方式的差異比較大，下面分別說(shuō)明。在寫(xiě)CSS的時(shí)候我們會(huì)發(fā)現(xiàn)，為了兼容瀏覽器等原因，我們往往需要寫(xiě)很多冗余的代碼，CSS預(yù)處理器就是為了解決CSS的這些問(wèn)題，簡(jiǎn)化CSS代碼的編寫(xiě)。目前最主流的CSS預(yù)處理器是LESS...

BlackMass 2019-08-30 13:12 評(píng)論0 收藏0
大話css預(yù)編譯處理（三）：基礎(chǔ)語(yǔ)法篇

摘要：值得慶幸的是，這三款預(yù)處理器語(yǔ)言的語(yǔ)法和語(yǔ)法都差不多。在這一節(jié)中，我們依次來(lái)對(duì)比一下這三款預(yù)處理器語(yǔ)言各種特性的異同之處，以及使用方法。預(yù)處理器語(yǔ)言支持任何變量例如顏色數(shù)值文本。一、Sass、LESS和Stylus的語(yǔ)法每一種語(yǔ)言都有自己一定的語(yǔ)法規(guī)則，CSS預(yù)處理器語(yǔ)言也不例外，在真正使用CSS預(yù)處器語(yǔ)言之前還有一個(gè)不可缺少的知識(shí)點(diǎn)，就是對(duì)語(yǔ)法的理解。值得慶幸的是，這三款CSS預(yù)...

劉東 2019-08-30 15:55 評(píng)論0 收藏0
學(xué)習(xí)Less-看這篇就夠了

摘要：在網(wǎng)上討論看來(lái)，與相比于功能更為豐富，但對(duì)于學(xué)習(xí)成本以及適應(yīng)時(shí)間，稍勝一籌，這也是我選擇的原因。如果你也是的使用者，還需要配合進(jìn)行處理，具體可見(jiàn)我的這篇文章飛行手冊(cè)，里面詳細(xì)說(shuō)明了的處理方式。原文鏈接前言 CSS的短板 ????作為前端學(xué)習(xí)者的我們或多或少都要學(xué)些 CSS ，它作為前端開(kāi)發(fā)的三大基石之一，時(shí)刻引領(lǐng)著 Web 的發(fā)展潮向。而 CSS 作為一門(mén)標(biāo)記性語(yǔ)言，可能給初...

hiyayiji 2019-08-29 13:59 評(píng)論0 收藏0
前端知識(shí)歸納

摘要：繼承性子標(biāo)簽會(huì)繼承父標(biāo)簽樣式優(yōu)先級(jí)行內(nèi)樣式選擇器類(lèi)選擇器標(biāo)簽選擇器通配符繼承機(jī)制創(chuàng)建了的元素中，在垂直方向上的會(huì)發(fā)生重疊。技能考察：一、關(guān)于Html 1、html語(yǔ)義化標(biāo)簽的理解; 結(jié)構(gòu)化的理解; 能否寫(xiě)出簡(jiǎn)潔的html結(jié)構(gòu); SEO優(yōu)化 a、理解：根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開(kāi)發(fā)者閱讀和寫(xiě)出更優(yōu)雅的代碼的同時(shí) 讓瀏覽器的爬蟲(chóng)和...

sixleaves 2019-08-02 16:13 評(píng)論0 收藏0
前端知識(shí)歸納

摘要：繼承性子標(biāo)簽會(huì)繼承父標(biāo)簽樣式優(yōu)先級(jí)行內(nèi)樣式選擇器類(lèi)選擇器標(biāo)簽選擇器通配符繼承機(jī)制創(chuàng)建了的元素中，在垂直方向上的會(huì)發(fā)生重疊。技能考察：一、關(guān)于Html 1、html語(yǔ)義化標(biāo)簽的理解; 結(jié)構(gòu)化的理解; 能否寫(xiě)出簡(jiǎn)潔的html結(jié)構(gòu); SEO優(yōu)化 a、理解：根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開(kāi)發(fā)者閱讀和寫(xiě)出更優(yōu)雅的代碼的同時(shí) 讓瀏覽器的爬蟲(chóng)和...

NotFound 2019-08-23 16:53 評(píng)論0 收藏0