CSS3-伪类

1.target-伪类 （对锚点状态进行修改） 

双冒号是CSS3里的固定伪类语法，但是使用单冒号也有效

   E:target            修改锚点

1. a{
2. font: 20px/20px "微软雅黑";
3. }
4. div{
5. 300px;
6. height: 200px;
7. background: red;
8. font: 50px/200px "微软雅黑";
9. color: #fff;
10. text-align: center;
11. display: none;
12. }
13. div:target{
14. display: block;
15. }
16. #div2:target{
17. 300px;
18. height: 300px;
19. background: #000;
20. }
22. <ahref="#div1">div1</a>
23. <ahref="#div2">div2</a>
24. <ahref="#div3">div3</a>
26. <divid="div1">div1</div>
27. <divid="div2">div2</div>
28. <divid="div3">div3</div>

 

2.checked-伪类  （对表单的radio和checkbox状态修改）

 E:checked    E代表checkbox或者radio元素

1. input[type='checkbox']:checked{
2. 100px;
3. height: 100px;
4. background: red;
5. }
6. input[type='radio']:checked{
7. 200px;
8. height: 200px;
9. background: green;
10. }
12. <inputtype="checkbox"/>
13. <inputtype="radio"/>

                               

3.文本伪类

E:first-lineE标签里第一行文字的状态

E:first-letterE标签里第一个文字的状态

E::selectionE标签里文字被选中的状态（双冒号是CSS3里的固定伪类语法，这里必须冒号才能有效）

E:before在E标签的最前面添加内容

E:after在E标签的最后面添加内容

 

 

 

 

1. p{
2. 200px;
3. border: 1px solid #f00;
4. }
5. p:first-line{
6. color: #f00;
7. font: 20px/50px "微软雅黑";
8. }
9. p:first-letter{
10. font-size: 50px;
11. color: green;
12. }
13. p::selection{
14. background: green;
15. color: #fff;
16. }
17. p:before{
18. content: 'kaivon';
19. display: block;
20. border: 5px solid #000;
21. }
22. p:after{
23. content: 'kaivon';
24. display: block;
25. color: #000;
26. border: 5px solid #000;
27. }
29. <p>
30. 这里一段方佣兵的2烟消云散提哩提哩仍佣兵的2烟消云散提哩仍佣里一段方佣兵的2烟消云散提哩仍佣兵佣兵枯厈这里一段方佣兵的2烟消云散提哩仍佣兵佣兵枯厈这里一段方佣兵的2烟消云散提哩仍佣兵佣兵枯厈这里一段方佣兵的2烟消云散提哩仍佣兵佣兵枯厈这里一段方佣兵的2烟消云散提哩仍佣兵佣兵枯厈这里一段方佣兵的2烟消云散提哩仍佣兵佣兵枯厈
31. </p>

 

4.