一、组合选择器
群组选择器
/* 每个选择器位可以为三种基础选择器的任意一个，用逗号隔开，控制多个 */
div, #div, .div {
color: red
]
后代(子代)选择器
.sup .sub {
后代
}
.sup > .sub {
子代
}
兄弟(相邻)选择器
.up ~ .down {
兄弟
}
.up + .down {
相邻
}
交集选择器
section.ss#s {
标签类名id名综合修饰
}
二、复杂选择器的优先级
1.与修饰符位置无关
2.属性选择器与类选择器权重相同
3.id 无限大于 类[属性] 无限大于 标签
4.权重只与个数相关，个数(类型)均相同时，最后由位置决定
三、伪类选择器
链接标签四大伪类
:hover(悬浮) | :active(点击集合)
:link :visited
位置相关
:nth-child() | :last-child 先确定位置再匹配类型
:nth-of-type() 先匹配类型再确定位置
四、盒模型
margin + border + padding + content(width x height)
都具有自身区域
margin参与布局，不参与盒子显示，其他都参与盒子显示
border颜色自身定义，padding和content颜色由背景色填充
# 整体设置
padding： 上 右 下 左 (无值边取对边)
# 分开位置
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
# 整体设置
border: 10px solid black;
# 分开设置
border-top: 10px solid black;
border-right: 10px solid black;
border-bottom: 10px solid black;
border-left: 10px solid black;
如果要保证显示区域大小不变，增加了padding和border，可以相应减少content的区域
五、盒模型布局
完成自身布局：margin-left | margin-top
下移|右移：top取正值|left取正值
上移|左移：top取负值|left取负值
作为兄弟，上盒子的垂直布局会影响下盒子垂直方位，上盒子的结束位置为下盒子的开始位置