CSS选择器

 

 1 CSS学习大纲
 2     在标签上设置style属性：
 3         background-color:#2459a2  ;
 4         height:48px  ;
 5     编写CSS样式：
 6         1.标签的style属性
 7         2.写在head里面，style标签中写样式
 8             ID选择器
 9                 #i1{
10                     background-color:2459a2  ;
11                     height:48px  ;
12                      }
13             class选择器  *****
14                 .c1{
15                     background - color: 2459a2  ;
16                     height: 48px  ;
17                     }
18                 <标签 class='名字'> </标签>
19             标签选择器
20                 div{
21                     background - color: 2459a2;
22                     height: 48px ;
23                    }
24                  所有的div都使用这个样式
25             层级选择器（空格）  *****
26                 .c1 .c2 div{
27                       background - color: 2459a2;
28                       height: 48px;
29                            }
30             组合选择器（逗号）  *****
31                 #i1,.c1,div{
32                             }
33             属性选择器   *****
34                 对选择到到标签再通过属性再进行一次筛选
35                 .c1[n='alex']{width:100px ;height:200px;}
36         3、多行注释
37             /*
38             ...内容...
39             */
CSS学习大纲

 

 1 <!DOCTYPE html>
 2 <!--CSS选择器1 手动选择器-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <div style="background-color:#2459a2;height:48px;">111111</div>
10     <div style="background-color:#2459a2;height:48px;">222222</div>
11     <div style="background-color:#2459a2;height:48px;">333333</div>
12 </body>
13 </html>
CSS选择器1 手动选择器
 1 <!DOCTYPE html>
 2 <!--CSS选择器2 ID选择器-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         #i1{
 9             background-color:#2459a2  ;
10             height:48px  ;
11             }
12         #i4{
13             background-color:#2459a2  ;
14             height:48px  ;
15             }
16         #i5{
17             background-color:#2459a2  ;
18             height:48px  ;
19             }
20         #i6{
21             background-color:#2459a2  ;
22             height:48px  ;
23             }
24     </style>
25 </head>
26 <body>
27     <div id="i1">111111</div>
28     <div id="i1">222222</div>
29     <div id="i1">333333</div>
30     <!--ID只能唯一，但是强制写也可以显示，不要用不规范-->
31 
32     <div id="i4">444444</div>
33     <div id="i5">555555</div>
34     <div id="i6">666666</div>
35 </body>
36 </html>
CSS选择器2 ID选择器
 1 <!DOCTYPE html>
 2 <!--CSS选择器3 class选择器-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .c1{
 9             background-color:#2459a2  ;
10             height:48px  ;
11             }
12         .c2{
13             background-color:#E80203;
14             height:48px  ;
15             }
16 
17     </style>
18 </head>
19 <body>
20     <div class="c1">444444</div>
21     <div class="c1">555555</div>
22     <div class="c1">666666</div>
23 
24     <span class="c2">77777</span>
25     <span class="c2">88888</span>
26     <span class="c2">99999</span>
27 </body>
28 </html>
CSS选择器3 class选择器
 1 <!DOCTYPE html>
 2 <!--CSS选择器4 标签选择器-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         div{
 9             background-color:#2459a2  ;
10             color:white;
11             height:48px  ;
12             }
13     </style>
14 </head>
15 <body>
16     <div>111111</div>
17     <div>222222</div>
18     <div>333333</div>
19 
20     <span>4444</span>
21     <span>5555</span>
22 </body>
23 </html>
CSS选择器4 标签选择器
 1 <!DOCTYPE html>
 2 <!--CSS选择器5 层级选择器-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         span div{
 9             background-color:#2459a2  ;
10             color:#E80203;
11             height:48px  ;
12                   }
13         .c1 .c2 div{
14             background-color:#5EA21A  ;
15             color:#E8D215;
16             height:48px  ;
17                   }
18         <!--层级不要写太深没有意义-->
19     </style>
20 </head>
21 <body>
22     <div>111111</div>
23     <div>222222</div>
24     <div>333333</div>
25 
26     <span>4444</span>
27     <span>5555</span>
28     <span>66666
29         <div>77777</div>
30     </span>
31 
32     <span class="c1">8888
33         <div class="c2">99999
34             <div>000000000000</div>
35         </div>
36     </span>
37 </body>
38 </html>
CSS选择器5 层级选择器
 1 <!DOCTYPE html>
 2 <!--CSS选择器6  组合选择器-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         #i1，#i2,#3{
 9             background-color:#2459a2  ;
10             height:48px  ;
11             }
12         #i4{
13             background-color:#2459a2  ;
14             height:48px  ;
15             }
16         #i5{
17             background-color:#2459a2  ;
18             height:48px  ;
19             }
20         #i6{
21             background-color:#2459a2  ;
22             height:48px  ;
23             }
24     </style>
25 </head>
26 <body>
27     <div id="i1">111111</div>
28     <div id="i2">222222</div>
29     <div id="i3">333333</div>
30     <!--ID只能唯一，但是强制写也可以显示，不要用不规范-->
31 
32     <div id="i4">444444</div>
33     <div id="i5">555555</div>
34     <div id="i6">666666</div>
35 </body>
36 </html>
CSS选择器6 组合选择器
 1 <!DOCTYPE html>
 2 <!--CSS选择器7 属性选择器-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         input[type='text']{width: 100px;height: 200px;}
 9         input[n='alex']{width: 80px;height: 160px;}
10         .c1[n='alex']{width: 60px;height: 100px;}
11     </style>
12 </head>
13 <body>
14     <input type="text">
15     <input type="text"n="alex">
16     <input class="c1" type="text" n="alex">
17 
18     <input type="password">
19     <input class="c1" type="password">
20 </html>
CSS选择器7 属性选择器

 

 

 1 <!DOCTYPE html>
 2 <!--CSS选择器6  组合选择器-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         #i1,#i2,#i3{
 9             background-color:#0632A2  ;
10             height:48px  ;
11             }
12         #i4,span{
13             background-color:#A24500  ;
14             height:48px  ;
15             }
16         #i5,.c1{
17             background-color:#A29F00  ;
18             height:48px  ;
19             }
20         #i6{
21             background-color:#36A200  ;
22             height:48px  ;
23             }
24     </style>
25 </head>
26 <body>
27     <div id="i1">111111</div>
28     <div id="i2">222222</div>
29     <div id="i3">333333</div>
30     <!--ID只能唯一，但是强制写也可以显示，不要用不规范-->
31 
32     <div id="i4">444444</div>
33     <div id="i5">555555</div>
34     <div id="i6">666666</div>
35     <span>7777</span>
36 
37     <div class="c1">9999999</div>
38 </body>
39 </html>
CSS选择器6 组合选择器加强

 

posted @ 2017-08-22 19:50  颜言  阅读(148)  评论(0)  编辑  收藏  举报