css 杂谈

设置第n个元素的样式

first-chid 
last-child
nth-chid(n/ 2n / 2n-1) // 第n个、偶数标签、奇数标签
nth-child(n+3)  // 从第3个标签开始到最后
nth-child(-n+3)  // 从0-3个标签
nth-last-child(3) // 倒数第3个

css 选择器中的逗号、空格分隔符、连写的区别

1、逗号分隔：并列关系。表示哪个选择器出现都会出现设置的效果
<div class="bro1"></div>
<div class="bro2"></div>
.bro1, .bro2 {
    font-size: 14px;
}

2、空格分隔：父子关系。表示当前元素子元素会出现设置效果。
<div class="father">
    <div class="son"></div>
</div>
.father .son {
    font-size: 14px;
}

3、连写：同时具备设置的选择符的某元素才会出现设置效果
<div class="color yellow"></div>
.color.yellow {
    color: yellow;
}

flex 布局

容器的六个属性：

flex-direction: row/row-reverse/column/column-reverse; // 主轴
flex-wrap: nowrap/wrap/wrap-reverse; // 换行（不换、第一行在上、第一行在下）
flex-flow: <flex-direction> <flex-wrap> // 主轴 + 换行
justify-content: flex-start/flex-end/center/space-between/space-around; // 主轴对齐方式（左对齐、右对齐、居中、两端对齐、每个项目两侧间隔相等）
align-items: flex-start/flex-end/center/bseline/stretch; //交叉轴对齐方式（起点对齐、终点对齐、中点对齐、基线对齐、若未设height或设置了auto将占满容器高度（默认））