建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
上邊這三個(gè)組合選擇器必須和其他選擇器配合使用，以指定瀏覽器僅選擇某種特定上下文中的元素。
創(chuàng)新互聯(lián)專(zhuān)注于于田網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供于田營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，于田網(wǎng)站制作、于田網(wǎng)頁(yè)設(shè)計(jì)、于田網(wǎng)站官網(wǎng)定制、微信平臺(tái)小程序開(kāi)發(fā)服務(wù)，打造于田網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供于田網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。
article section { margin: 5px }
article > section { border: 1px solid #ccc }你可以用子組合選擇器>選擇一個(gè)元素的直接子元素。上例中，第一個(gè)選擇器會(huì)選擇article下的所有命中section選擇器的元素。第二個(gè)選擇器只會(huì)選擇article下緊跟著的子元素中命中section選擇器的元素。
在下例中，你可以用同層相鄰組合選擇器+選擇header元素后緊跟的p元素:
header + p { font-size: 1.1em }你也可以用同層全體組合選擇器~，選擇所有跟在article后的同層article元素，不管它們之間隔了多少其他元素:
article ~ article { border-top: 1px dashed #ccc }這些組合選擇器可以毫不費(fèi)力地應(yīng)用到sass的規(guī)則嵌套中?？梢园阉鼈兎旁谕鈱舆x擇器后邊，或里層選擇器前邊:
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}sass會(huì)如你所愿地將這些嵌套規(guī)則一一解開(kāi)組合在一起:
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規(guī)則可以嵌套，對(duì)屬性進(jìn)行嵌套也可以減少很多重復(fù)性的工作。
本文標(biāo)題：創(chuàng)新互聯(lián)SASS教程:2-3. 子組合選擇器和同層組合選擇器：>、+和~
本文路徑：http://m.fisionsoft.com.cn/article/coigops.html
