less學習三---父選擇器

Integ 發布于2019-04-23 13:27 / 3793人閱讀

摘要：引用父選擇器需要用到符號運算符表示嵌套規則的父選擇器，并且在修改類或偽類選擇器的應用中非常普遍編譯為也可以用在其他場景，例如產生重復的類名編譯成編譯成編譯成還可以改變選擇器的順序，將后置，將當前的選擇器提到父級編譯為當

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

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

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

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

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

云服務器 GPU云服務器華三云服務器的選擇選擇器派生選擇器省市選擇器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1895.html

談談CSS預處理器

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

BlackMass 2019-08-30 13:12 評論0 收藏0
大話css預編譯處理（三）：基礎語法篇

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

劉東 2019-08-30 15:55 評論0 收藏0
學習Less-看這篇就夠了

摘要：在網上討論看來，與相比于功能更為豐富，但對于學習成本以及適應時間，稍勝一籌，這也是我選擇的原因。如果你也是的使用者，還需要配合進行處理，具體可見我的這篇文章飛行手冊，里面詳細說明了的處理方式。原文鏈接前言 CSS的短板 ????作為前端學習者的我們或多或少都要學些 CSS ，它作為前端開發的三大基石之一，時刻引領著 Web 的發展潮向。而 CSS 作為一門標記性語言，可能給初...

hiyayiji 2019-08-29 13:59 評論0 收藏0
前端知識歸納

摘要：繼承性子標簽會繼承父標簽樣式優先級行內樣式選擇器類選擇器標簽選擇器通配符繼承機制創建了的元素中，在垂直方向上的會發生重疊。技能考察：一、關于Html 1、html語義化標簽的理解; 結構化的理解; 能否寫出簡潔的html結構; SEO優化 a、理解：根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和...

sixleaves 2019-08-02 16:13 評論0 收藏0
前端知識歸納

摘要：繼承性子標簽會繼承父標簽樣式優先級行內樣式選擇器類選擇器標簽選擇器通配符繼承機制創建了的元素中，在垂直方向上的會發生重疊。技能考察：一、關于Html 1、html語義化標簽的理解; 結構化的理解; 能否寫出簡潔的html結構; SEO優化 a、理解：根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和...

NotFound 2019-08-23 16:53 評論0 收藏0