Python爬虫(5)css选择器

css选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

顾名思义css选择器定位和选择的是HTML抽象DOM树上的一个或一类元素。

---

---

前言

写爬虫的我们为什么要学习CSS选择器？

CSS选择器除了是CSS语言最为核心的部分。

更重要的事CSS选择器是一个索引的思路。而这个思路我们在爬虫定位目标的时候常常用的到！

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS选择器的概念

 标签选择器
 id选择器
 class选择器（类选择器）
 复合选择器
 伪类

标签选择器

这里的标签指的是HTML的标签。
有一百多个呢。。。但是常见的不超过十个。
和爬虫关系最紧密的，也就a，link，p这么常见的几个。

<p>hello world<\p>

//　对应的选择器就是p
p {
  text-align: center;
  color: red;
}

id选择器

这是最直接的选择器，一对一的。同一个页面只能有一个id，不能重复。

#标识符后面的字符串就是id选择器

<p id="first">hello world<\p>

//　对应的选择器就是p
#first {
  text-align: center;
  color: red;
}

类选择器

最常用的选择器，往往是多选。标识符是.
想实现什么效果，就加入什么效果的class。相当于插拔式的样式。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

.center {text-align: center}

这也是对于爬虫而言最重要的。

同一类元素往往有着相同的格式！！！CSS实现的方法就是通过class相互区别。
所以，爬虫也可以做按照这个思路，索引同一类的元素，一次性抓取。

属性选择器

一般用来缩小范围
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。

<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

//全部
a[target] {
  background-color: yellow;
}
//第一个
a[target="_blank"] { 
  background-color: yellow;
}

属性选择器也支持一些匹配语法的。。。但是具体的语法对我们写爬虫不重要。
只需要知道属性也可以帮助我们做定位。

二、选择器的嵌套

复合选择器

CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)
并列（,）

通过这四个和基础的选择器组合成为复杂的选择器。

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

li strong {
    font-style: italic;
    font-weight: normal;
  }

后代选择器是指节点下面的全部后代。子节点的选择器，只是当前节点的孩子，不会发生递归。

伪类，伪元素

对于爬虫而言意义不大，可忽略

 伪类，伪元素并不是随意的。相反高度固定。比如以下的例子。他们都是为了实现一些固定的常用的抽象功能而存在的。
 用法也极为固定。所以无需理解，也能使用。

代码如下（示例）：

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

详情见
w3school

相当于固定反应的特殊的标签tag。

---

三、实践

我们用百度简单说一下。
用什么选择器无所谓，怎么做选择也无所谓。
但是尽量快速逼近目标很重要，因为那样代码不就少一点了嘛。

其实我，看到这图片是唯一的还是比较期待有个id让我用用的。
结果失望没有。如果不是我们需要的，那就再加几个属性。

map area[style="outline:none"]

这样应该就可以了。

四、总结

效率由低到高

id选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
相邻选择器（h1+p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel=“external”]）
伪类选择器（a:hover,li:nth-child）

对于爬虫而言，类选择器，标签选择器，属性选择器，后代选择器
用的比较多。

如果不知道怎么写。。。怎么办看看CSS里面人家怎么写的。
浏览器选中元素之后，就会看到对应的CSS，推敲一下，是不是需要的。

选择器的核心在于如何快速的实现唯一性！！！

下一讲，应该是一个系列化的实战项目。一边实践，一边引入新的内容。
我看了一下这几篇文章。。。有点让人打瞌睡啊