1 <html>
2 <head>
3 <style type="text/css">
4 *
5 {
6 margin: 0;
7 padding: 0;
8 }
9 .demo
10 {
11 width: 300px;
12 border: 1px solid #ccc;
13 padding: 10px;
14 }
15 ul
16 {
17 list-style-type: none;
18 text-align: center;
19 }
20 li
21 {
22 float: left;
23 height: 20px;
24 line-height: 20px;
25 width: 20px;
26 -moz-border-radius:10px;
27 -webkit-border-radius:10px;
28 border-radius: 10px;
29 text-align: center;
30 background-color: grey;
31 color: orange;
32 margin-right: 5px;
33
34 }
35 .important{
36 font-size: bold;
37 color:yellow;
38 }
39 .important.items{
40 background-color: #CCC;
41 }
42 .last.first{
43 color: blue;
44 }
45 ul>li{
46 background-color: green;
47 color:yellow;
48 }
49 li+li{
50 background-color: green;
51 color: yellow;
52 border: 1px solid #ccc;
53 }
54 .clearfix>.first{
55 background-color: red;
56 }
57 #first+.active{
58 background-color: gray;
59 }
60 .middle~li{
61 background-color: #33FF00;
62 }
63 </style>
64 </head>
65 <body>
66 <div class="demo">
67 <ul class="clearfix">
68 <li id="first" class="first">1</li>
69 <li class="active important">2</li>
70 <li class="important items">3</li>
71 <li class="important">4</li><div></div>
72 <li class="items">5</li>
73 <li class="middle">6</li>
74 <li>7</li>
75 <li>8</li>
76 <li>9</li>
77 <li id="last" class="last">10</li>
78 </ul>
79 </div>
80 </body>
81 </html>
一：.important.items表示同时拥有important和items这两个class的元素，IE6不支持多类选择器
二：E F后代选择器，E代表祖先，F代表后代，.demo li 代表class为demo的元素下的所有的li元素
三：E,F群选择器，.demo,li代表class为demo的元素，li元素都具有的样式
四：E>F子选择器，.clearfix>.first代表class为clearfix的元素的孩子中class为first的元素
五：E+F相邻选择器，#first+.active，紧接在id为first后的class为active的元素，他们有相同的父亲。也就是EF有相同的父亲，且相邻，F在E的后面，用其来选择F元素
六：E~F通用兄弟选择器，EF有相同的父亲，F在E的后面，但不一定相邻，用其来选择F元素
