css（二）-- 選擇器

時間 2019-11-30

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

選擇器的做用是找到對應的數據進行樣式化。css

選擇器的格式html

　　選擇器{ 屬性：屬性值; }測試

經常使用選擇器spa

　　標籤選擇器       h2{ }
　　類選擇器         .a { } <h2 class=「a」>           // 不能是數字
　　ID選擇器        #a{ } <h2 id=「a」>                // ID要惟一
　　交集選擇器     h1,h2{ }
　　並集選擇器(父類選擇器) p a{ }
　　通用選擇器             *{   }
　　僞類選擇器   code

選擇器用法htm

一、標籤選擇器：找到全部指定的標籤進行樣式化blog

格式：utf-8

　　標籤名{
樣式1；樣式2....
}it

二、類選擇器: 使用類選擇器首先要給html標籤指定對應的class屬性值io

格式：

　　.class的屬性值{
樣式1；樣式2...
}

類選擇器要注意的事項：
1. html元素的class屬性值必定不能以數字開頭.
2. 類選擇器的樣式是要優先於標籤選擇器的樣式。

三、ID選擇器：使用ID選擇器首先要給html元素添加一個id的屬性值

格式：

　　#id屬性值{
樣式1；樣式2...
}

id選擇器要注意的事項：
      1. ID選擇器的樣式優先級是最高的，優先於類選擇器與標籤選擇器。
      2. ID的屬性值也是不能以數字開頭的。
      3. ID的屬性值在一個html頁面中只能出現一次（規範用法）。

四、交集選擇器：就是對選擇器1中的選擇器2裏面的數據進行樣式化

格式：

　　選擇器1 選擇器2{
樣式1，樣式2....
}

五、並集選擇器：對指定的選擇器進行統一的樣式化

格式：

　　選擇器1,選擇器2..{
樣式1；樣式2...
}

六、統配選擇器:進行統一化樣式

格式：

　　*{
樣式1；樣式2...
}

代碼示例：

css代碼

 1 /*標籤選擇器*/
 2 div{
 3     background-color: #FF0000;
 4     color: white;
 5 }
 6 /*類選擇器*/
 7 .divClass{
 8     background-color: #00FF00;
 9     color: red;
10 }
11 /*id選擇器*/
12 #divId{
13     background-color: #0000FF;
14     color: yellow;
15 }
16 /*交集選擇器*/
17 div span{
18     background-color: yellow;
19 }
20 /*並集選擇器*/
21 h3,p{
22     color: black;
23 }
24 
25 /*統配選擇器*/
26 *{
27     text-decoration: line-through;
28 }

html測試代碼

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <link href="css/2.css" rel="stylesheet"/>
 7     </head>
 8     
 9     <body>
10         <div>標籤選擇器</div>
11         <div class="divClass">類選擇器</div>
12         <div id="divId">id選擇器</div>
13         <div>
14             <h3 align="center">div中的標題</h3>
15             <p>我就是</p>
16             <span>div中的span標籤</span>
17         </div>
18         <span >div外的span標籤</span>
19     </body>
20 </html>
21 
22

七、僞類選擇器：僞類選擇器就是對元素處於某種狀態下進行樣式的。

代碼示例

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7             a:link{color:#F00} /* 沒有被點擊過---紅色 */
 8             a:visited{color:#0F0} /*  已經被訪問過的樣式---綠色 */ 
 9             a:hover{color:#00F;} /* 鼠標通過的狀態---藍 */
10             a:active{color:#FF0;}/* 按下的狀態爲---黃 */
11             
12         </style>
13     </head>
14     
15     <body>
16         <a href="#">百度</a>
17     </body>
18 </html>

注意：
1. a:hover 必須被置於 a:link 和 a:visited 以後
2. a:active 必須被置於 a:hover 以後

僞類選擇器代碼

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7             table{
 8                 background-color:#CCC;
 9                 border-collapse:collapse;
10                 border:3px;
11             }
12             tr:hover{
13                 background-color:#06F;
14             }
15             
16         </style>
17     </head>
18     
19     <body>
20         <table border="1px" width="400px" height="300px" align="center" >
21             <tr>
22                 <th>姓名</th>
23                 <th>成績</th>
24                 <th>人品</th>
25             </tr>
26             
27             
28             <tr>
29                 <td>張三</td>
30                 <td>98</td>
31                 <td>差</td>
32             </tr>
33            
34            
35             <tr>
36                 <td>李四</td>
37                 <td>50</td>
38                 <td>極好</td>
39             </tr>
40             
41             
42             <tr>
43                 <td>綜合測評</td>
44                 <td colspan="2">不錯</td>
45             </tr>
46         
47         
48         </table>
49     </body>
50 </html>

相關標籤/搜索

每日一句

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