CSS選擇器，主要是用來確定html的樹形結構中的DOM元素節點。主要分爲三部分：
一、基本選擇器
| 選擇器 | 類型 | 功能描述 |
| * | 通配選擇器 | 選擇文檔中所有的html元素 |
| E | 元素選擇器 | 選擇指定的類型的html元素 |
| #id | ID選擇器 | 選擇指定ID屬性值爲“id”的任意類型的元素 |
| .class | 類選擇器 | 選擇指定的class屬性值爲“class”的任意類型的任意多個元素 |
| selector1，selector2 | 羣組選擇器 | 將每一個選擇器匹配的元素集合並 |
- *{marigin:0;padding:0;}/*指的是文檔中所有的元素的margin值和padding值爲0*/
- ul *{background:blue;}/*指的是ul元素裏的所有標籤的背景顏色爲藍色，這裏選擇的對象是ul的所有子代元素；書寫時ul與*號之間有個空格*/
2.元素選擇器的運用：這是最常見的選擇器了，選擇的是文檔的元素
- p{color:red;}/*指的是文檔中所有p標籤的內容顏色爲紅色*/
3.ID選擇器的運用：選擇ID名爲“id”的任意元素
- #box{background:yellow;}/*選擇ID名爲box的元素，讓它的背景爲黃色*/
4.類選擇器的運用：選擇class名爲“class”的任意元素（可多個元素）
- .box{background:yellow;}/*選擇class名爲box的一個或多個元素，讓它的背景爲黃色*/
5、並列選擇器（羣組選擇器）
- p,ul,div{margin:0;padding:0;}/*選擇文檔中所有的p元素、ul元素、div元素的外邊距和內邊距都爲0*/
二、層次選擇器
| 選擇器 | 類型 | 功能描述 |
| E F | 後代選擇器 | 選擇匹配的F元素，且F元素被包含在匹配的E元素內 |
| E > F | 子選擇器 | 選擇匹配的F元素，且F元素是E元素的子元素 |
| E + F | 相鄰兄弟選擇器 | 選擇匹配的F元素，且F元素是E元素後面緊鄰的兄弟元素 |
| E ~ F | 通用選擇器 | 選擇匹配的F元素，且F元素是E元素後面的所有兄弟元素 |
三、屬性選擇器
| 選擇器 | 功能描述 |
| E[attr] | 選中具有attr屬性的E元素 |
| E[attr=val] | 選中具有attr屬性，並且屬性值爲val的E元素 |
| E[attr|=val] | 選中具有attr屬性，並且屬性值爲val或以val-開頭 |
| E[attr~=val] | 選中具有attr屬性，並且屬性值包含val的E元素，該屬性值必須以空格隔開 |
| E[attr*=val]通配符 | 選中具有attr屬性，並且屬性值包含val的E元素 |
| E[attr^=val]起始符 | 選中具有attr屬性，並且屬性值以val開始的E元素 |
| E[attr$=val]結束符 | 選中具有attr屬性，並且屬性值以val結束的E元素 |
<!DOCTYPE
HTML><html><head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"><title>無標題文檔</title><style>p{height:30px;border:1px solid #000;}p[cat]{background:red;}/*選擇屬性名爲cat的元素*/</style></head><body>
<p cat="leo">leo</p><p cat="dp">杜鵬</p><p cat="zM">子鼠</p><p cat="xm">小美</p></body></html>2、E[attr=val]
<!DOCTYPE
HTML><html><head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"><title>無標題文檔</title><style>p{height:30px;border:1px solid #000;}p[cat=leo]{background:red;}</style></head><body><p cat="leo">leo</p><p cat="dp">杜鵬</p><p cat="zM">子鼠</p><p cat="xm">小美</p></body></html>
<!DOCTYPE
HTML><html><head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"><title>無標題文檔</title><style>p{height:30px;border:1px solid #000;}p[cat|=b]{background:#C3C;}</style></head><body><p cat="b-leo">leo</p><p cat="bleo">杜鵬</p><p cat="b-leo">子鼠</p><p cat="g-xm">小美</p><p cat="b">無名氏</p></body></html>
4、E[attr~=val]
<!DOCTYPE
HTML><html><head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"><title>無標題文檔</title><style>p{height:30px;border:1px solid #000;}p[cat~=old]{background:red;}</style></head><body><p cat="leo
old">leo</p><p cat="dp">杜鵬</p><p cat="zM">子鼠</p><p cat="xm">小美</p></body></html>
5、E[attr*=val]通配符
<!DOCTYPE
HTML><html><head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"><title>無標題文檔</title><style>p{height:30px;border:1px solid #000;}p[cat*=d]{background:#C3C;}</style></head><body><p cat="bleo
old">leo</p><p cat="bdp">杜鵬</p><p cat="bzM">子鼠</p><p cat="gxm">小美</p></body></html>
6、E[attr^=val]起始符
<!DOCTYPE
HTML><html><head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"><title>無標題文檔</title><style>p{height:30px;border:1px solid #000;}p[cat^=g]{background:pink;}</style></head><body><p cat="bleo
old">leo</p><p cat="bdp">杜鵬</p><p cat="bzM">子鼠</p><p cat="gxm">小美</p></body></html>
7、E[attr$=val]結束符
<!DOCTYPE
HTML><html><head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"><title>無標題文檔</title><style>p{height:30px;border:1px solid #000;}p[cat$=M]{background:#CC0;}</style></head><body><p cat="bleo
old">leo</p><p cat="bdp">杜鵬</p><p cat="bzM">子鼠</p><p cat="gXM">小美</p></body></html>
四、僞類選擇器
| 選擇器 | 功能描述 |
| E ： first-child | 作爲父元素的第一個子元素的E元素 |
| E ： last-child | 作爲父元素的最後一個子元素的E元素 |
| E ： root |
|
| E F：nth-child（n） | 選中的F元素是E元素的第n個子元素 |
| E F： nth-last-child（n） | 選中的F元素是E元素的倒數第n個子元素 |
| E ： nth-of-type（n） | 選擇父元素內具有指定類型的第n個E元素 |
| E ： nth-last-of--type（n） | 選擇父元素內具有指定類型的倒數第n個E元素 |
| E ： first-of-type | 選擇父元素內具有指定類型的第1個E元素 |
| E ： last-of-type | 選擇父元素內具有指定類型的倒數第1個E元素 |
| E ： only-child | 選擇父元素內只包含一個子元素,且該元素是E元素 |
| E ： only-of-type | 選擇父元素內只包含一個類型的子元素，且該元素是E元素 |
| E ： empty | 選擇沒有子元素的元素 |
2、E ： last-child
<!DOCTYPE HTML><html> <head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"><title>無標題文檔</title><style>p {height: 30px;border: 1px solid #000;}p:first-child {background: red;}/*p:nth-child(2) 找p標籤父級下的第二個子元素，並且這個元素還的是p標籤 p:nth-of-type(2) 找p標籤父級下的第二個p元素 :first-child==:nth-child(1):last-child==:nth-last-child(1):first-of-type==nth-of-type(1):last-of-type==nth-last-of-type(1)*/</style></head> <body><p>p1</p><h1>h1</h1><p>p2</p><h1>h2</h1><p>p3</p><h1>h3</h1><p>p4</p><p>p5</p></body> </html>
3、E ： root
4、E F：nth-child（n）
<!DOCTYPE HTML><html>
<head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"><title>無標題文檔</title><style>p {height: 30px;border: 1px solid #000;}h2:nth-child(1) {/*查找p標籤的父元素的第一個孩子,並且該標籤剛好是p標記.*/
background: red;}</style>
</head><body><h2>h2</h2><p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p></body>
</html>
5、E F： nth-last-child（n）
<!DOCTYPE HTML><html>
<head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"><title>無標題文檔</title><style>p {height: 30px;border: 1px solid #000;}body *:nth-last-child(2n) {background: red;}/*p:nth-child(2) 找p標籤父級下的第二個子元素，並且這個元素還的是p標籤*/
</style></head>
<body><p>p1</p><h1>h1</h1><p>p2</p><h1>h2</h1><p>p3</p><h1>h3</h1><p>p4</p><p>p5</p>
</body></html>
6、E ： nth-of-type（n）
<!DOCTYPE HTML><html>
<head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"><title>無標題文檔</title><style>p {height: 30px;border: 1px solid #000;}p:nth-of-type(4) {background: red;}/*p:nth-child(2) 找p標籤父級下的第二個子元素，並且這個元素還的是p標籤 p:nth-of-type(2) 找p標籤父級下的第二個p元素*/</style></head>
<body>
<p>p1</p><h1>h1</h1><p>p2</p><h1>h2</h1><p>p3</p><h1>h3</h1><p>p4</p><p>p5</p></body>
</html>
7、E ： nth-last-of--type（n）
<!DOCTYPE HTML><html>
<head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"><title>無標題文檔</title><style>p {height: 30px;border: 1px solid #000;}p:nth-last-of-type(2) {background: red;}</style></head><body><p>p1</p><h1>h1</h1><p>p2</p>
<h1>h2</h1><p>p3</p><h1>h3</h1><p>p4</p><p>p5</p>
</body>
</html>
8、E ： first-of-type
:first-of-type==nth-of-type(1)
9、E ： last-of-type
:last-of-type==nth-last-of-type(1)
10、E ： only-child
11、E ： only-of-type
12、E ： empty
<!DOCTYPE HTML><html>
<head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"><title>無標題文檔</title><style>p {height: 30px;border: 1px solid #000;}p:empty {background: red;}span {display: block;height: 20px;}p *:only-of-type {background: yellow;}p *:only-child {background: blue;}/*p:nth-child(2) 找p標籤父級下的第二個子元素，並且這個元素還的是p標籤
p:nth-of-type(2) 找p標籤父級下的第二個p元素:first-child==:nth-child(1)
:last-child==:nth-last-child(1):first-of-type==nth-of-type(1):last-of-type==nth-last-of-type(1)*/</style>
</head><body><p>p5</p></body>
</html>
五、文本新增僞類
| 選擇器 | 功能描述 |
| E ：： first-letter | 選擇文本塊的第一個字母 |
| E ：： first-line | 選擇文本快的第一行 |
| E ：： before 和E ：： after | 主要用於清除浮動 |
| E ：： selection | 選中的E元素 |
<!DOCTYPE
HTML><html><head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"><title>無標題文檔</title><style></style></head><body>在
HTML5&CSS3 被炒至沸沸揚揚的今天，全面系統的掌握此項技能，是加重技術含金量的重要砝碼！</body></html>
