（1）、关系选择符的使用
（2）、伪类选择符的使用
特别是E:first-of-type与E：first-child 。其实它两最大的区别在于前者是父元素下的第一个结构标签，而后者不需要一定是第一个结构标签。如下例子：
XML/HTML Code复制内容到剪贴板
<div class="test">
<!– <a href="#">测试</a> –>
<p>p标签</p>
<a href="#">a标签</a>
<a href="#">a标签</a>
</div>
a:first-child是.test下的第一个结构标签，而且是a标签，不是则不起效果 。
a:first-of-type不需要是第一个子元素只需要.test下的a标签的第一个即可。
（3）、CSS属性之opacity、z-index 、display
a、opacity
在这次项目开发中，有一个效果是需要用到遮蔽层的效果。如下图。一开始我的做法是写两个div，然后将第二个div设置透明。然后再用hover后，将它透明度调回不透明。 同时也将第二个div定位，与第一个div重合。但我发现这样写下来代码多且容易乱。而参考了其他小伙伴的代码，发现其实灵活运用z-index也可以做到此效果。下面是具体实现
CSS代码：
CSS Code复制内容到剪贴板
.div1 {
width: 200px;
height: 200px;
background-color: #ccc;
position: relative;
font-size: 20px;
text-align: center;
line-height: 200px;
}
.div2 {
width: 200px;
height: 200px;
position: absolute;/*使其与父元素重合*/
