選擇器：選擇器是一種模式，用於選擇需要添加樣式的元素。
首先簡述六大選擇器
基本選擇器
標簽選擇器
類選擇器
ID選擇器
高級選擇器
層次選擇器
結構偽類選擇器
屬性選擇器
其中基本選擇器與層次選擇器較為常用。
一.基本選擇器
1.標簽選擇器
使用HTML標簽來設置標簽內的圖文樣式。
2.類選擇器
使用class屬性定義標簽類值，指定某一類屬性值來定義其樣式。
<h1 class=”classname”></h1>
.classname{font-size:18px;}
3.ID選擇器
給特定標簽賦一個獨有的id值，一個html文檔里不能夠有重復的id值。可以准確定位到標簽。
<header id=”idname”></header>
#idname{font-size:18px;}
基本選擇器代碼介紹：
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="../css/demo03.css"/> 7 </head> 8 <body> 9 <h1>信息表格填寫</h1> 10 <hr/> 11 <form> 12 <h3>賬戶信息</h3> 13 <p id="id1">姓 名：<input type="text" name="uname"/></p> 14 <p class="intro">Email：<input type="email" name="myemail"/></p> 15 <h3>隱私信息</h3> 16 <p id="id2">手機號：<input type="number" name="phone"></p> 17 <p class="intro">密 碼：<input type="password" name="pass"></p> 18 <p><input type="submit" value="提交"></p> 19 </form> 20 </body> 21 </html>
demo03.css代碼：
1 h1{color:red;}/*這是標簽選擇器*/ 2 .intro{color:green;} /*這是類選擇器*/ 3 #id1{color: #E864D1;} 4 #id2{color: #A03200;}/*這是ID選擇器*/
運行效果圖：
二.高級選擇器
1.層次選擇器
| 選擇器 | 類型 | 功能描述 |
| E F | 后代選了器 | 選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素內 |
| E>F | 子選擇器 | 選擇匹配的F元素，且匹配的F元素是匹配的F元素的子元素 |
| E+F | 相鄰兄弟選擇器 | 選擇匹配的F元素，且匹配的F元素緊位於匹配的E元素的后面 |
| E~F | 通用兄弟選擇器 | 選擇匹配的F元素，且位於匹配的E元素后的所有匹配的F元素 |
2.結構偽類選擇器
| 選擇器 | 功能描述 |
| E：first-child | 作為父元素的第一個子元素的元素E |
| E：last-child | 作為父元素的最后一個子元素的元素E |
| E F：nth-child(n) | 選擇父級元素E的第n個子元素F，（n可以是1,2,3）關鍵字為even，odd |
| E:first-of-type | 選擇父元素內具有指定類型的第一個E元素 |
| E：last-of-type | 選擇父元素內具有指定類型的最后一個E元素 |
| E F：nth-of-type(n) | 選擇父元素內具有指定類型的第n個F元素 |
使用E F：nth-child(n)和E F:nth-of-type(n)的關鍵點：
E F:nth-child(n)在父級里從第一個元素開始查找不分類型。
E F:nth-of-type(n)在父級里先看類型，再看位置。
3.屬性選擇器
| 屬性選擇器 | 功能描述 |
| E[attr] | 選擇匹配具有屬性attr的E元素 |
| E[attr=val] | 選擇匹配具有屬性attr的E元素，並且屬性值為val（其中val區分大小寫） |
| E[attr^=val] | 選擇匹配元素E，且E元素定義了屬性attr,其屬性值是以val開頭的任意字符串 |
| E[attr$=val] | 選擇匹配元素E，且E元素定義了屬attr，其屬性值是以val結尾的任意字符串 |
| E[attr*=val] | 選擇匹配元素E，且E元素定義了屬性attr，其屬性值包含了“val”，換句話說，字符串val與屬性值中的任意位置相匹配 |