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

 好了，完整的一个对话框样式呈现在眼前了，至于对话框的小三角形的方向，相信大家看了上上段对于border介绍的代码也都知道该怎么做了吧，没错，就是改下position的位置，改下border显示颜色的方位~ (本兽不喜欢贴图片，体谅下额，需要的可以拷贝代码直接运行看效果，造轮子不仅仅是造轮子，也能让人加深印象，更好的理解)

2.作为内容的半透明背景层

比如我们的需求是做一个半透明的登录框吧(这里也是在代码中通过注释来解释)：

1. <style>  
2.   
3.     body{   
4.   
5.         background: url(img/1.jpg) no-repeat left top /*这里本兽加了个图片背景，用以区分背景的半透明及内容的完全不透明*/   
6.   
7.     }   
8.   
9.     .test-div{   
10.   
11.         position: relative;  /*日常相对定位(重要，下面内容也会介绍)*/   
12.   
13.         width:300px;   
14.   
15.         height: 120px;   
16.   
17.         padding: 20px 10px;   
18.   
19.         font-weight: bold;   
20.   
21.     }   
22.   
23.     .test-div:before{   
24.   
25.         position: absolute;  /*日常绝对定位(重要，下面内容也会略带介绍)*/   
26.   
27.         content: "";  /*:before和:after必带技能，重要性为满5颗星*/   
28.   
29.         top:0;   
30.   
31.         left: 0;   
32.   
33.         width: 100%;  /*和内容一样的宽度*/   
34.   
35.         height: 100%;  /*和内容一样的高度*/   
36.   
37.         background: rgba(255,255,255,.5); /*给定背景白色，透明度50%*/   
38.   
39.         z-index:-1 /*日常元素堆叠顺序(重要，下面内容也会略带介绍)*/   
40.   
41.     }   
42.   
43. style>  
44.   
45.   
46.   
47. <div class="test-div">  
48.   
49.     <table>  
50.   
51.         <tr>  
52.   
53.             <td>Nametd>  
54.   
55.             <td><input placeholder="your name" />td>  
56.   
57.         tr>  
58.   
59.         <tr>  
60.   
61.             <td>Passwordtd>  
62.   
63.             <td><input placeholder="your password" />td>  
64.   
65.         tr>  
66.   
67.         <tr>  
68.   
69.             <td>td>  
70.   
71.             <td><input type="button" value="login" />td>  
72.   
73.         tr>  
74.   
75.     table>  
76.   
77. div>   

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

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

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

position 定位的问题

position属性规定了元素的定位类型，默认为static。

该属性还可以有下值：

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
inherit：规定应该从父元素继承 position 属性的值。

代码：

1.   
2.   
3.      
4.   
5.   "test-div">Hello World