2-3. 子組合選擇器和同層組合選擇器:>、+和~
上邊這三個組合選擇器必須和其他選擇器配合使用,以指定瀏覽器僅選擇某種特定上下文中的元素。
article section { margin: 5px }
article > section { border: 1px solid #ccc }
你可以用子組合選擇器>選擇一個元素的直接子元素。上例中,第一個選擇器會選擇article下的所有命中section選擇器的元素。第二個選擇器只會選擇article下緊跟著的子元素中命中section選擇器的元素。
在下例中,你可以用同層相鄰組合選擇器+
選擇header
元素后緊跟的p
元素:
header + p { font-size: 1.1em }
你也可以用同層全體組合選擇器~
,選擇所有跟在article
后的同層article
元素,不管它們之間隔了多少其他元素:
article ~ article { border-top: 1px dashed #ccc }
這些組合選擇器可以毫不費力地應用到sass
的規則嵌套中。可以把它們放在外層選擇器后邊,或里層選擇器前邊:
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
sass
會如你所愿地將這些嵌套規則一一解開組合在一起:
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 }
在sass
中,不僅僅css
規則可以嵌套,對屬性進行嵌套也可以減少很多重復性的工作。