不能不知道的CSS选择器技巧

        left: 0;   
  
        width: 100%;  /*和内容一样的宽度*/   
  
        height: 100%;  /*和内容一样的高度*/   
  
        background: rgba(255,255,255,.5); /*给定背景白色，透明度50%*/   
  
        z-index:-1 /*日常元素堆叠顺序(重要，下面内容也会略带介绍)*/   
  
    }   
  
</style>  
  
<!–这里容兽偷个懒，布局简单写写–>  
  
<div class="test-div">  
  
    <table>  
  
        <tr>  
  
            <td>Name</td>  
  
            <td><input placeholder="your name" /></td>  
  
        </tr>  
  
        <tr>  
  
            <td>Password</td>  
  
            <td><input placeholder="your password" /></td>  
  
        </tr>  
  
        <tr>  
  
            <td></td>  
  
            <td><input type="button" value="login" /></td>  
  
        </tr>  
  
    </table>  
  
</div>   

上面的代码拷贝过去，加上张图片可测试效果。

当然，:bofore和:after也还有其他更多的巧妙用法，这里也不一一列出来了，这里放上一个用这两个伪元素加上css3动画实现一些比较好看及实用的动态效果的链接：HoverEffectIdeas

说完了:before和:after，我们稍微扯扯一些其他的css样式及布局注意点(可能大家不怎么注意，从而导致一些布局和样式出问题)。