// 「>」 子代選擇器：選擇 一個元素 / 裡的第一個直接子元素 / class
// ul 裡面的第一個li
ul {
& > li {
color: blue;
}
}
// 選擇 class .logo 裡面的第一個class .logo-title
.logo {
& > .logo-title {
color: blue;
}
}
// 「+」 同層相鄰組合選擇器：選擇 同層的並緊接在後的元素 / class
// 選擇header 緊接在後的img
header {
& + img {
width: 100px;
}
}
// 選擇 class .logo 緊接在後的class .logo-img
.logo {
& + .logo-img {
width: 100px;
}
}
// 「~」 同層全體組合選擇器：選擇同層指定的元素 / class的後面所有元素 / class，不管它們之間隔了多少個其他元素 / class
// h1 同層後面所有的p
h1 {
& ~ p {
color: gray;
}
}
// 選擇 class logo 同層後面所有的class .logo-title
.logo {
& ~ .logo-title {
color: gray;
}
}
Web前端 (5)