CSS选择器：
类选择器： .classname为形式，同一个文档中可以出现多个同样的classname。
ID选择器： #idname为形式，同一个文档只能出现一个同样的idname。
选择器优先级：
如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高。如果你遇到规则冲突，你可以增加其中一条的确定度或将之移到后面以使它具有更高优先级。
伪类选择器： 为了可以正确地渲染链接元素的样式，:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active。:focus伪类选择器常伴随在:hover伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。
（写样式时，为毛要按这个顺序写：其实本质还是“同等优先权的样式，写在后边的会覆盖前边”，a标签的伪类只不过是又结合了不同的动作顺序，动作的触发顺序决定了伪类的顺序必须按lvha来写。
下面结合这4个伪类简单说下：
因为前2者两种状态是常态，而后2者是即时状态，当即时状态触发时，要覆盖常态，所以2个即时状态要放在后边；
因为在常态下：如果a标签被访问过后，就要呈现被访问过的状态，所以visited 要放在link后边；
因为鼠标按下时，伴随着悬停的a标签上，所以要想active覆盖hover，就必须把active放后边；）
:link :visited :active :hover :focus :first-child :nth-child :nth-last-child
:nth-of-type :first-of-type :last-of-type :empty :target :checked :enabled :disabled
其中，:first-child语法格式为：
element:first-child{ style properties }
element必须是父元素子集里的第一个元素。
<!--html代码-->
<body>
<div>
<b>testesttesttesttesttest</b>
<span>This span is limed!</span>
<span>This span is not. :(</span>
</div>
</body>
/*css代码*/
span:first-child{
background-color: lime;
}
结果：
修改代码:
<!--html代码-->
<body>
<div>
<span>This span is limed!</span>
<span>This span is not. :(</span>
</div>
</body>
结果，如图所示：
其中， :nth-last-child语法格式为：
element:nth-last-child(an+b){
/规则/
}
示例：tr:nth-last-child(-n+4)
匹配HTML表格中的最后四行。
小技巧：使用display：table-cell 和 vertical-align: middle 来对多行文字进行垂直居中，但是不能对外层容器进行浮动。对多图进行垂直居中时，可以利用透明图片和文字大小撑开空间。
