第六次：CSS选择器实战训练

一、 前言

上一篇文章

【Python | 边学边敲边记】第五次：Xpath实战训练

中给大家讲解并带着大家实战训练了Xpath，爬取了伯乐在线文章的基本信息，并且介绍scrapy里的shell调试模式使用，还是很实用的哈。

本篇将给大家讲解CSS选择器，以及一起实战练习，牢记基础语法知识。

二、CSS选择器简介

1.维基百科看CSS

2.百度百科看CSS选择器

3.CSS选择器常用类型

4.CSS选择器常用语法

常用语法01

常用语法02

常用语法03

三、看代码，边学边敲边记CSS选择器

1.cmd下进入虚拟环境并且利用`scrapy shell`调试

2.在cmd下利用shell模式获取文章信息

(1)F12分析页面(这次我选取的页面网址为：http://python.jobbole.com/89196/)

F12下分析页面

通过分析我们可以看出，文章标题是在为的下的标签下(页面查询知entry-header类名全局唯一)。

(2)通过类选择器和后代选择器综合运用,取出文章标题

我们发现文章标题并没被完全取出，还是被标签包裹着，有两种方法获取文字：

方法一：正则表达式获取（麻烦）

方法二：伪类选择器（简单）

方法二是不是超级简单，瞬间爱死CSS了。

(3)我们继续获取其他数据（复习巩固一下CSS的用法）

获取文章发布时间

获取文章点赞数、收藏数、评论数

(4)详解CSS选择器获取文章简介、文章类型获取

1) 文章简介获取

F12分析文章简介CSS选择器

从上面可以看到，文章的简介内容放在了： class为entry的div的第二子类(blockquote标签)，他(blockquote)的第一个子类(p标签)中,所以我们推导出图上的CSS选择器，代码如下：

2) 文章分类

F12分析文章类别CSS选择器

从上面可以看出文章类型分为两部分：前面+后面，前面类型(实践项目)：在class为entry-meta-hide-on-mobile的p标签的后代中的第一个a标签中，后面类型(爬虫)：在class为entry-meta-hide-on-mobile的p标签的后代中的第二个a标签中，所以我们推导出图上的CSS选择器，代码如下：

3.现在`jobbole.py`中的代码及运行结果

代码：

运行结果：

四、后言

学完这一期，大家也许觉得好像和之前实战没有什么区别，但是我想告诉大家的是：Xpath和CSS选择器的确有相同功能，但实现的原理是不同的，一般来说大家掌握一种就好了，那为什么还要给大家介绍两种呢？如果大家两篇都有看的话，就会发现有些地方使用CSS选择器会更加简单，而有些地方又用Xpath似乎更好，而且对于前端有优势的同学，使用CSS选择器的话学起来就更比啦！

公布个好消息：公众号:极简XksA,读者数破千啦~今天晚上20:00第一期赠书活动将出结果，九月初即将有第二期赠书活动，希望大家多多支持，互相学习交流，一起进步。

▼