CSS 选择器
我们知道网页由一个个节点组成，那么我们可以使用 CSS 选择器来定位节点：
(1) 如下，如果我们想选择 id 为 container 的节点，用 CSS 选择器表示为：#container
(2) 如下，如果我们想选择 class 为 wrapper 的节点，用 CSS 选择器表示为：.wrapper
(3) 如下，如果我们想选择 class 为 wrapper 节点下的 h2 标签，用 CSS 选择器表示为：.wrapper h2
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<div >
<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 的所有节点 |
- 上一篇 »13 CSS样式权重问题
- 下一篇 »css不常用的4个选择器-个人向