CSS選擇器

時間 2019-11-18

標籤 css 選擇器欄目 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         三、多行註釋
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 組合選擇器增強

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。