日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)SASS教程:2-1.父選擇器的標(biāo)識符&

一般情況下,sass在解開一個嵌套規(guī)則時就會把父選擇器(#content)通過一個空格連接到子選擇器的前邊(articleaside)形成(#content article#content aside)。這種在CSS里邊被稱為后代選擇器,因?yàn)樗x擇ID為content的元素內(nèi)所有命中選擇器articleaside的元素。但在有些情況下你卻不會希望sass使用這種后代選擇器的方式生成這種連接。

最常見的一種情況是當(dāng)你為鏈接之類的元素寫:hover這種偽類時,你并不希望以后代選擇器的方式連接。比如說,下面這種情況sass就無法正常工作:

article a {
  color: blue;
  :hover { color: red }
}

這意味著color: red這條規(guī)則將會被應(yīng)用到選擇器article a :hover,article元素內(nèi)鏈接的所有子元素在被hover時都會變成紅色。這是不正確的!你想把這條規(guī)則應(yīng)用到超鏈接自身,而后代選擇器的方式無法幫你實(shí)現(xiàn)。

解決之道為使用一個特殊的sass選擇器,即父選擇器。在使用嵌套規(guī)則時,父選擇器能對于嵌套規(guī)則如何解開提供更好的控制。它就是一個簡單的&符號,且可以放在任何一個選擇器可出現(xiàn)的地方,比如h1放在哪,它就可以放在哪。

article a {
  color: blue;
  &:hover { color: red }
}

當(dāng)包含父選擇器標(biāo)識符的嵌套規(guī)則被打開時,它不會像后代選擇器那樣進(jìn)行拼接,而是&被父選擇器直接替換:

article a { color: blue }
article a:hover { color: red }

在為父級選擇器添加:hover等偽類時,這種方式非常有用。同時父選擇器標(biāo)識符還有另外一種用法,你可以在父選擇器之前添加選擇器。舉例來說,當(dāng)用戶在使用IE瀏覽器時,你會通過JavaScript標(biāo)簽上添加一個ie的類名,為這種情況編寫特殊的樣式如下:

#content aside {
  color: red;
  body.ie & { color: green }
}

/*編譯后*/
#content aside {color: red};
body.ie #content aside { color: green }

sass在選擇器嵌套上是非常智能的,即使是帶有父選擇器的情況。當(dāng)sass遇到群組選擇器(由多個逗號分隔開的選擇器形成)也能完美地處理這種嵌套。


當(dāng)前題目:創(chuàng)新互聯(lián)SASS教程:2-1.父選擇器的標(biāo)識符&
分享地址:http://www.dlmjj.cn/article/djphsis.html