CSS使用語法示例如下：
selector {property: value}
上述代碼中selector是選擇器，CSS中有4種選擇器，分別是ID選擇器、類選擇器、標籤選擇器、通配選擇器，並且不同的選擇器可以相互組合。選擇器的具體內容如下表所示。
| 名稱 | 符號 | 使用方式 | 含義 |
|---|---|---|---|
| id選擇器 | # | #name | 選擇id爲name的所有元素 |
| 類選擇器 | . | .name | 選擇類名爲name的所有元素 |
| 標籤選擇器 | S(標籤名稱) | p | 選擇所有<p>元素 |
| 通配選擇器 | * | * | 選擇頁面所有元素 |
| 多選擇器 | S1，S2 | div,p | 選擇所有 <div> 元素和所有 <p> 元素 |
| 子元素選擇器 | S1>S2 | div>p | 選擇父元素爲 <div> 元素的所有 <p> 元素 |
| 包含選擇器 | S1 S2 | div p | 選擇 <div> 元素內部的所有 <p> 元素 |
| 相鄰選擇器 | S1+S2 | div+p | 選擇緊接在 <div> 元素之後的所有 <p> 元素 |
具體示例如下：
#para1 { /*id選擇器,id爲para1元素都生效*/
text-align:center;
color:red;
}
.center {text-align:center;} /*類選擇器,類名爲center元素生效*/
p{ /*標籤選擇器,所有<p>元素生效*/
color:red;
font-style:italic;
}
.child>li{ /*子選擇器,只會對第一代子元素生效*/
border:1px solid darkgreen;
}
.include li{ /*包含選擇器,對所有子元素生效*/
border:3px solid yellow;
}
#id1+.closer{
border:5px solid chartreuse; /*相鄰選擇器,相鄰才生效*/
}
將上述代碼保存爲test.css文件，將文件以外部樣式鏈接到HTML文件中，具體如下所示。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>CSS樣式</title>
6 <link rel="stylesheet" type="text/css" href="test.css">
7 </head>
8 <body>
9 <p>CSS樣式演示</p>
10 <br>
11 <div>
12 <span class="center">類選擇器</span>
13 </div>
14 <br>
15 <div>
16 <ul class="child">
17 <li>子選擇器</li>
18 <li>子選擇器</li>
19 <li>子選擇器</li>
20 </ul>
21 </div>
22 <br>
23 <div>
24 <ul class="include">
25 <li>包含選擇器</li>
26 <li>包含選擇器</li>
27 <li>包含選擇器</li>
28 </ul>
29 </div>
30 <br>
31 <div id="id1">
32 <span id="para1">id選擇器</span>
33 </div>
34 <span class="closer">相鄰選擇器</span>
35 </body>
36 </html>
運行結果如下圖所示。
