Scss子組合選擇器和同層組合選擇器:>、+和~


你可以用子組合選擇器>選擇一個元素的直接子元素。上例中,第一個選擇器會選擇article下的所有命中section選擇器的元素。第二個選擇器只會選擇article下緊跟着的子元素中命中section選擇器的元素。

在下例中,你可以用同層相鄰組合選擇器+選擇header元素后緊跟的p元素:

header + p { font-size: 1.1em }

你也可以用同層全體組合選擇器~,選擇所有跟在article后的同層article元素,不管它們之間隔了多少其他元素:

article ~ article { border-top: 1px dashed #ccc }

這些組合選擇器可以毫不費力地應用到scss的規則嵌套中。可以把它們放在外層選擇器后邊,或里層選擇器前邊:

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee } dl > { dt { color: #333 } dd { color: #555 } } nav + & { margin-top: 0 } }

scss會如你所願地將這些嵌套規則一一解開組合在一起:

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

scss中,不僅僅css規則可以嵌套,對屬性進行嵌套也可以減少很多重復性的工作。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM