css 實際開發中的高級用法

1. 使用 :not() 在菜單上應用/取消應用邊框

項目案例：每個菜單項添加邊框，然後去除最後一個

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

2.使用負的 nth-child 選擇項目

在CSS中使用負的 nth-child 選擇項目1到項目n。

li {
  display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
  display: block;
}

3.使用屬性選擇器用於空元素

當span內容爲空時，span 通過爲元素設置display：none

span:empty {
  display:none;
}

4.使用margin-left排版左重右輕列表

使用flexbox橫向佈局時，最後一個元素通過margin-left:auto實現向右對齊