CSS－－层叠样式表 （对网页进行美化和装修的利器）
一、css常用选择器
标签选择器 ：标签名 {样式声明}（注：每一个声明用“；”结束）
层级选择器：父级标签 下级标签 {}
id选择器：#id值 {}
类选择器：.类值 {}
群组选择器：群组选择器1，群组选择器2，...群组选择器n {} （每个选择器之间用“，”分隔）
相邻选择器：前选择器 + * {} （某选择器相邻的元素）如：#bg-blue + * {}
兄弟选择器：前选择器 ~ * {} （和某选择器同级的所以兄弟元素）如：#bg-blue ~ * {}
伪类：子元素选择器：first-child,last-child,nth-child(),nth-last-child()
如：ul :first-child {} ,ul :last-child {}, ul :nth-child(2) {}, ul :nth-last-child(3) {}
伪类：类型选择器：first-of-type,last-of-type,nth-of-type()，only-of-type {}
如：ul li:first-of-type {}（ul里第一个li类型的元素）,ul li:last-of-type {}（ul里最后一个li类型的元素）
ul li:nth-of-type(6) {} （ul里第6个li类型的元素） p:only-of-type {}（选择只有一个子元素且子元素为p）
注：
伪类中的子元素选择器与类型选择器的功能几乎是一样的,那我们应该用哪个呢?
这二类伪类选择器关注点不同, 子元素选择器的重点是 "child" 关键字上,关注的是子元素位置
而类型选择器关注点在 "type" 关键字上,重点是元素的类型
伪类：表单控件：form :enabled {}（所有活动表单控件），
form :checked {} （表单中默认值选择器）如：form :checked + * {} （将单选按钮中的文本选中）
form :invalid {} 如：
/* 当在控件中输入无效值文本自动变成红色 */
form :invalid {
color: red;
}
/* 设置控件获取到焦点时的样式 */
form :focus {
background-color: lightgreen;
}
/* 设置鼠标悬停时的样式 */
button:hover {
width: 56px;
height: 28px;
background-color: black;
color: white;
}
