CSS选择器种类很多，CSS选择器的作用是将CSS规则应用于HTML文档中特定的元素
选择任意元素
可以使用星号（*）来表示”任意元素“。
示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>任意选择器</title> <style> *{ margin:8px; padding:8px; border:1px solid #E3722E; } </style></head><body><h1>利永贞网</h1><h2>学编程，上利永贞网</h2><p>study hard, improve every day</p></body></html> |
类选择器
通过设置元素的 class 属性，可以为元素指定类名。类名由程序员自己指定。 文档中的多个元素可以拥有同一个类名。
在写样式表时，类选择器是以英文句号（.）开头的。
示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>类选择器</title> <style> .study { margin:8px; padding:8px; border:1px solid #E3722E; } </style></head><body><h1>利永贞网</h1><h2>学编程，上利永贞网</h2><p class="study">study hard, improve every day</p></body></html> |
ID选择器
通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。
在写样式表时，ID选择器是以#开头的。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ID选择器</title> <style> #study { margin:8px; padding:8px; border:1px solid #E3722E; } </style></head><body><h1>利永贞网</h1><h2>学编程，上利永贞网</h2><p id="study">study hard, improve every day</p></body></html> |
伪类选择器
CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，:hover 会在鼠标悬停在选中元素上时应用相应的样式。
伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 (:visited)， 内容状态(如 :checked ), 鼠标位置 (如:hover). 完整列表参见 CSS3 Selectors working spec.
| 伪类选择器 | 说明 |
| :link | 未访问 |
| :visited | 已访问 |
| :active | 激活链接 |
| :hover | 鼠标悬停 |
| :focus | 有焦点 |
| :first-child | 在一组兄弟元素中的第一个元素 |
| :nth-child | 找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序 |
| :nth-last-child | 和上面的一样， 只是它从结尾处反序计数 |
| :nth-of-type | 选取氏兄弟元素中的指定一个 |
| :first-of-type | 选择一组兄弟元素中其类型的第一个元素 |
| :last-of-type | 一组兄弟元素中其类型的最后一个元素 |
| :empty | 没有子元素的元素 |
| :target | 代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配 |
| :checked | 表示任何处于选中状态的单选、复选、多选 |
| :enabled | 表示任何被启用的元素 |
| :disabled | 表示任何被禁用的元素 |
示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> a{ color:#000; } a:visited { color:red } </style></head><body><h1>利永贞网</h1><h2>学编程，上利永贞网</h2><p id="study">study hard, improve every day</p></body></html> |
基于关系的选择器
CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。
| 选择器 | 选择的元素 |
| A E | 元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推) |
| A > E | 元素A的任一子元素E(也就是直系后代) |
| E:first-child | 任一是其父母结点的第一个子节点的元素E |
| B + E | 元素B的任一下一个兄弟元素E |
| B ~ E | B元素后面的拥有共同父元素的兄弟元素E |
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>基于关系的选择器</title> <style> td{ border: 1px solid #777; } #data-table-1 td:first-child {color: red;} #data-table-1 td:first-child + td {color: blue;} </style></head><body><h1>利永贞网</h1><h2>学编程，上利永贞网</h2><table id="data-table-1"> <tbody> <tr> <td><strong>Prefix</strong></td> <td><code>0001</code></td> <td>default</td> </tr> </tbody></table></body></html> |