选择器—总结 

 1 /*元素选择器*/
 2 body{color:red;}
 3 h2,a,p{color:blue;}
 4 
 5 /*通配选择器*/
 6 *{color:red;}
 7 
 8 /*类选择器*/
 9 *.span{color:red;}
10 table.test{color:red;}
11 .test1.test2.test3{color:red;}
12 
13 /*ID选择器*/
14 #name{color:red;}
15 
16 /*简单属性选择器*/
17 p[class]{color:red;}
18 a[href][class]{color:red;}
19 
20 /*具体属性选择器*/
21 p[class="test"]{color:red;}
22 a[href="http://www.baidu.com"][class="test"]{color:red;}
23 
24 /*部分属性选择器*/
25 p[class~="test"]{color:red;}
26 a[class^="test"]{color:red;}
27 a[class$="test"]{color:red;}
28 a[class*="test"]{color:red;}
29 
30 /*后代选择器*/
31 ul li{color:red;}
32 ul li ol li{color:red;}
33 ul li,ol li{color:red;}
34 
35 /*选择子元素*/
36 ul > li{color:red;}
37 ul ul > li{color:red;}
38 
39 /*相邻兄弟姐妹元素*/
40 li+li{color:red;}
41 table+ul{color:red;}
42 ol li+li{color:red;}
43 
44 /*伪类选择器*/
45 a:visited{color:red;}
46 
47 /*伪元素选择器*/
48 a:first-letter{color:red;}

 

posted @ 2017-06-22 19:32  zc168  阅读(158)  评论(0)    收藏  举报