核心技術

偽類選擇器	含義
li:nth-child(2)	第2個 li
li:nth-child(n)	所有的li
li:nth-child(2n)	所有的第偶數個 li
li:nth-child(2n+1)	所有的第奇數個 li
li:nth-child(-n+5)	前5個 li
li:nth-last-child(-n+5)	最后5個 li
li:nth-child(7n)	選中7的倍數

    border-right: 3px solid white;border-top: 3px solid white;// 父元素中的偶數個子元素&:nth-child(2n) {border-right: 0 none;}// 父元素的前兩個子元素(即第1和第2個item)&:nth-child(-n + 2) {border-top: 0 none;}

完整代碼范例

<template><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>
</template><style lang="scss" scoped>
.container {border: 3px solid red;width: 600px;height: 300px;margin: 30px;display: flex;flex-wrap: wrap;.item {display: flex;justify-content: center;align-items: center;box-sizing: border-box;width: 50%;height: 50%;background-color: yellow;border-right: 3px solid white;border-top: 3px solid white;// 父元素中的偶數個子元素&:nth-child(2n) {border-right: 0 none;}// 父元素的前兩個子元素(即第1和第2個item)&:nth-child(-n + 2) {border-top: 0 none;}}
}
</style>