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