1. 基本选择器
| 选择器 | 名称 | 描述 | css版本 |
|---|---|---|---|
| *{} | 通用/全部 | 选择所有元素 | 2 |
| tag{} | 元素/标签 | 指定元素/标签的元素 | 1 |
| #id{} | 编号/ID | 指定ID属性的元素 | 1 |
| .class{} | 类/class | 指定class属性的元素 | 1 |
| [attr]系列 | 属性 | 指定attr属性的元素 | 2-3 |
2. 全部选择器
当我们想抓取页面上所有元素的时候，可以使用全部选择器。全部选择器使用简单，但是因为经常会匹配到无关显示的元素（如 <html> 和 <head> 等），所以不太常用。
布局：
<p>羌笛何须怨杨柳</p>
<div>春风不度玉门关</div>
样式：
*{
background-color:red;
}
3. TAG选择器
当我们想抓取页面上某些相同标签的元素时，可以通过标签选择器来直接抓取它们。
布局：
<p>日照香炉生紫烟</p>
<p>遥看瀑布挂前川</p>
<div>飞流直下三千尺</div>
<div>疑是银河落九天</div>
样式：
p{
background-color: red;
}
div{
background-color: green;
}
4. ID选择器
如果我们想单独抓取某一个页面上的元素，而无关它的标签，那么我们可以给这个元素添加一个id值，然后使用ID选择器来抓取它。
css对重复id的情况的处理方案是，全部选中。
布局：
<p id="part1">死去元知万事空</p>
<p id="part2">但悲不见九州同</p>
<p id="part3">王师北定中原日</p>
<p id="part4">家祭无忘告乃翁</p>
<div>葡萄美酒夜光杯</div>
<div>欲饮琵琶马上催</div>
<div id="part1">醉卧沙场君莫笑</div>
<div>古来征战几人回</div>
样式：
#part2{
color:red;
}
#part1{
color:green;
}
5. Class选择器
当我们想抓取页面上的某一些元素，而无关它们的类型的时候，我们可以给这些元素添加一些相同值的 class 属性，然后通过class选择器来抓取它们。
布局：
<p class="tored">朝辞白帝彩云间</p>
<p>千里江陵一日还</p>
<div class="tored">两岸猿声啼不住</div>
<div >轻舟已过万重山</div>
样式：
.tored{
background-color:red;
}
我们可以对同一个元素添加多种class，值和值之间用空格隔开。
布局：
<p class="tored">月落乌啼霜满天</p>
<p>江枫渔火对愁眠</p>
<div class="tored towhite">姑苏城外寒山寺</div>
<div>夜半钟声到客船</div>
样式：
.tored{
background-color:red;
}
.towhite{
color:white;
}
6. 属性选择器
如果我们想通过一些对元素属性的过滤来锁定某个或某些元素，则可以使用属性选择器。
| 选择器 | 描述 | 举例 |
|---|---|---|
[attr]{} |
匹配拥有attr属性名的所有元素 | [href]{} |
[attr=value]{} |
匹配拥有attr=value键值对的所有元素 | [href="#1"]{} |
[attr^=value]{} |
匹配拥有attr的属性值以value开头的所有元素 | [href^="http:"]{} |
[attr$=value]{} |
匹配拥有attr的属性值以value结尾的所有元素 | [href$=".com"]{} |
[attr*=value]{} |
匹配拥有attr的属性值包含value的所有元素 | [href*="baidu"]{} |
[attr~=value]{} |
匹配当属性值具有多个值时，其中一个是value的 | [class~="abc"]{} |
[attr|=value] |
匹配按照"-"符分割后的其中一个值是value的 | [lang|="en"] |
布局：
<a class="a b c">这是一个没有href的超链接</a><br />
<a class="b">这是一个没有href的超链接</a><br />
<a href="
http://www.baidu.com">点我跳入百度</a><br />
<a href="
http://www.w3school.com">点我跳入w3school</a><br />
<a href="a.html">点我跳入a.html</a><br />
<h1 lang="en-US">I am a teacher！</h1>
样式：
[href]{ color:red;}
[class="b"]{ color:green;}
[href^="http://"]{ color:yellow;}
[href$=".com"]{ color:wheat;}
[href*="a"]{ color:#FF9800;}
[class~="b"]{ color:blue;}
[lang|="en"]{ color:deeppink;}
