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实现向右对齐