css学习(一) 





 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元素




 






            

            
posted @ 
2013-07-02 11:14 
五爷 
阅读(184) 
评论(0) 
 
收藏 
举报