選擇具有相同類但沒有重複選擇器的同級元素
少不把任何限制的時間父選擇器(&
)的數量可以在複雜的選擇使用,因此,我們可以用它不止一次想在下面的例子來選擇同級元素,而無需重複選擇。
.demo {
border: 1px solid black; /* add border to all elements with demo class */
& + & { /* select all .demo that have another .demo sibling immediately prior */
background: red;
}
& + & + & { /* select all .demo that have two .demo sibling immediately prior */
background: chocolate;
}
& ~ & { /* select all .demo elements that have another .demo sibling prior */
color: beige;
}
}
編譯時的上述程式碼將產生以下 CSS:
.demo {
border-left: 1px solid black;
}
.demo + .demo {
background: red;
}
.demo + .demo + .demo {
background: chocolate;
}
.demo ~ .demo {
color: beige;
}