我们知道网页由一个个节点组成，那么我们可以使用 CSS 选择器来定位节点：
(1) 如下，如果我们想选择 id 为 container 的节点，用 CSS 选择器表示为：#container
(2) 如下，如果我们想选择 class 为 wrapper 的节点，用 CSS 选择器表示为：.wrapper
(3) 如下，如果我们想选择 class 为 wrapper 节点下的 h2 标签，用 CSS 选择器表示为：.wrapper h2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> </head> <body> <div id="container"> <div class="wrapper"> <p class="text">Hello World!</p> <h2 class="title">Hello World!</h2> </div> </div> </body> </html>
| 选择器 | 例子 | 例子描述 |
| .class | .info | 选择 class = "info" 的所有节点 |
| #id | #name | 选择 id = "name" 的所有节点 |
| * | * | 选择所有节点 |
| element | p | 选择所有 p 节点 |
| element, element | div, p | 选择所有 div 和 p 节点 |
| element element | div p | 选择 div 节点内部的所有 p 节点 |
| element>element | div>p | 选择父节点为 div 的所有 p 节点 |
| [attribute] | [target] | 选择带有 target 属性的所有节点 |
| [attribute=value] | [target=blank] | 选择 target="blank" 的所有节点 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 flower 的所有节点 |