一、 前言
上一篇文章Scrapy实战5：Xpath实战训练中给大家讲解并带着大家实战训练了Xpath，爬取了伯乐在线文章的基本信息，并且介绍scrapy里的shell调试模式使用，还是很实用的哈。
本篇将给大家讲解CSS选择器，以及一起实战练习，牢记基础语法知识。
二、CSS选择器简介
1.维基百科看CSS
代码语言：javascript复制层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、
阶层式样式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机
语言，由W3C定义和维护。目前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持
，而下一版的CSS4仍在开发中。
2.百度百科看CSS选择器
代码语言：javascript复制要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。
每一条css样式定义由两部分组成，形式如下：[code] 选择器{样式} [/code] 在{}之前的部分就是“选择
器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
3.CSS选择器常用类型
代码语言：javascript复制常用的大CSS选择器：
# 1.元素选择器：又称为标签选择器，根据标签名来固定样式作用范围。
eg.对页面所有p标签样式限定：
p{
font-size:px; # 字体大小
background:#900; # 背景颜色
}
# 2.类选择器：即根据元素(标签)的class属性来固定样式作用范围。（class不是唯一的）
eg.设置class为demoDiv的div块颜色
.demoDiv{
color:#FF0000;
}
# 3.ID选择器:即根据元素(标签)的id属性来固定样式作用范围。（ID是唯一的）
eg.设置id为demoDiv的div块颜色
#demoDiv{
color:#FF0000;
}
# 4.后代选择器：又称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。
eg.设置id为links的后代中标签a为红色
#links a {
color:red;
}
# 5.子选择器：子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个
后代，通过“>”进行选择。
eg.设置id为links的后代中第一个a标签为蓝色
#links > a {
color:blue;
}
当然还有很多css选择器，比如伪类选择器、通用选择器、群组选择器等，我就不赘述了，大家要用百度谷歌
一下就可以了嘿嘿。
4.CSS选择器常用语法
常用语法01
常用语法02
常用语法03
三、看代码，边学边敲边记CSS选择器
1.cmd下进入虚拟环境并且利用`scrapy shell`调试
代码语言：javascript复制C:Users\Desktop>workon spiderenv
(spiderenv) C:Users\Desktop>scrapy shell http://python.jobbole.com//
2.在cmd下利用shell模式获取文章信息
(1)F12分析页面(这次我选取的页面网址为：http://python.jobbole.com/89196/)
F12下分析页面
通过分析我们可以看出，文章标题是在class为entry-header的div下的h1标签下(页面查询知entry-header类名全局唯一)。
(2)通过类选择器和后代选择器综合运用,取出文章标题
代码语言：javascript复制>>> response.css(".entry-header h1").extract()
['<h1>爬虫进阶：反反爬虫技巧</h1>']
我们发现文章标题并没被完全取出，还是被h1标签包裹着，有两种方法获取文字：
- 方法一：正则表达式获取（麻烦）
>>> title = response.css(".entry-header h1").extract()[]
>>> reg_01 = "<h1>(.*?)</h1>"
>>> title = re.findall(reg_01,title)[]
>>> title
'爬虫进阶：反反爬虫技巧'
- 方法二：伪类选择器（简单）
>>> title = response.css(".entry-header h1 ::text").extract()[]
>>> title
'爬虫进阶：反反爬虫技巧'
# title = response.css(".entry-header h1 ::text").extract()[0]
方法二是不是超级简单，瞬间爱死CSS了。 (3)我们继续获取其他数据（复习巩固一下CSS的用法）
- 获取文章发布时间
'''
预备小知识：
1.str.strip():可以去除str里左右两端的空格和n,r。
2.str.replace("a","b"):将str里所有的a由b代替。
'''
# 文章发布时间
>>> data_r = response.css(".entry-meta-hide-on-mobile::text").extract()[]
>>> data_r
'rnrn 2018/06/28 · '
>>> data_r = data_r.strip()
>>> data_r
'2018/06/28 ·'
>>> data_time = data_r.replace('·','').strip()
>>> data_time
'2018/06/28'
# data_r = response.css(".entry-meta-hide-on-mobile::text").extract()[0].strip()
# data_time = data_r.replace('·','').strip()
- 获取文章点赞数、收藏数、评论数
# 点赞数：h10下id为89196votetotal，因为页面内该id值唯一，故可以直接用id选择器
>>> response.css("#89196votetotal::text").extract()[]
'2'
# praise_number = int(response.css("#89196votetotal::text").extract()[0])
# 收藏数：a:nth-child(2)表示选取a标签的第二个元素
>>> response.css("span.btn-bluet-bigger:nth-child(2)::text").extract()[]
' 6 收藏'
>>> import re
>>> reg_02 = '.*(d ).*'
>>> collection_str = response.css("span.btn-bluet-bigger:nth-child(2)::text").extract()[]
>>> re.findall(reg_02,collection_str)[]
'6'
# collection_str = response.css("span.btn-bluet-bigger:nth-child(2)::text").extract()[0]
# reg_02 = '.*(d ).*'
# collection_number = int(re.findall(reg_02,collection_str)[0])
# 评论数：X先生这次选择的又是没有评论的，可谓良苦用心，只为了让大家自己多动动脑袋，多想想，
# 哈哈哈
>>> response.css("span.hide-on-480::text").extract()[]
' 评论'
# 如果有评论的话，和收藏数一样，用正则表达式匹配数字即可，自己找篇有评论的试试吧~
(4)详解CSS选择器获取文章简介、文章类型获取
1) 文章简介获取
F12分析文章简介CSS选择器
从上面可以看到，文章的简介内容放在了：class为entry的div的第二子类(blockquote标签)，他(blockquote)的第一个子类(p标签)中,所以我们推导出图上的CSS选择器，代码如下：
代码语言：javascript复制>>> response.css(".entry > blockquote:nth-child(2) > p:nth-child(1)::text").extract()[]
'主要针对以下四种反爬技术：Useragent过滤；模糊的Javascript重定向；验证码；请求头一致性检查。'
# summary = response.css(".entry > blockquote:nth-child(2) > p:nth-child(1)::text").extract()[0]
2) 文章分类
F12分析文章类别CSS选择器
从上面可以看出文章类型分为两部分：前面 后面，前面类型(实践项目)：在class为entry-meta-hide-on-mobile的p标签的后代中的第一个a标签中，后面类型(爬虫)：在class为entry-meta-hide-on-mobile的p标签的后代中的第二个a标签中，所以我们推导出图上的CSS选择器，代码如下：
代码语言：javascript复制>>> response.css(".entry-meta-hide-on-mobile > a:nth-child(1)::text").extract()[]
'实践项目'
>>> response.css(".entry-meta-hide-on-mobile > a:nth-child(2)::text").extract()[]
'爬虫'
# type_01 = response.css(".entry-meta-hide-on-mobile > a:nth-child(1)::text").extract()[0]
# type_02 = response.css(".entry-meta-hide-on-mobile > a:nth-child(2)::text").extract()[0]
# article_type = type_01 "·" type_02
3.现在`jobbole.py`中的代码及运行结果
代码：
代码语言：javascript复制# -*- coding: utf-8 -*-
import scrapy
import re
class JobboleSpider(scrapy.Spider):
name = 'jobbole'
allowed_domains = ['blog.jobbole.com']
start_urls = ['http://python.jobbole.com/89196/']
def parse(self, response):
# CSS选择器实战
# 文章标题
title = response.css(".entry-header h1 ::text").extract()[]
# 发布日期
data_r = response.css(".entry-meta-hide-on-mobile::text").extract()[].strip()
data_time = data_r.replace('·','').strip()
# 文章分类
type_01 = response.css(".entry-meta-hide-on-mobile > a:nth-child(1)::text").extract()[]
type_02 = response.css(".entry-meta-hide-on-mobile > a:nth-child(2)::text").extract()[]
article_type = type_01 "·" type_02
# 文章简介
summary = response.css(".entry > blockquote:nth-child(2) > p:nth-child(1)::text").extract()[]
# 点赞数
praise_number = int( response.css("#89196votetotal::text").extract()[])
# 收藏数
collection_str = response.css("span.btn-bluet-bigger:nth-child(2)::text").extract()[]
reg_02 = '.*?(d ).*'
collection_number = int(re.findall(reg_02,collection_str)[])
print("文章标题：" title)
print("发布日期：" data_time)
print("文章分类：" article_type)
print("文章简介：" summary)
print("点赞数：" str(praise_number))
print("收藏数：" str(collection_number))
运行结果：
代码语言：javascript复制文章标题：爬虫进阶：反反爬虫技巧
发布日期：//
文章分类：实践项目·爬虫
文章简介：主要针对以下四种反爬技术：Useragent过滤；模糊的Javascript重定向；验证码；请求头一致性检查。
点赞数：
收藏数：
四、后言
学完这一期，大家也许觉得好像和之前Xpath实战没有什么区别，但是我想告诉大家的是：Xpath和CSS选择器的确有相同功能，但实现的原理是不同的，一般来说大家掌握一种就好了，那为什么还要给大家介绍两种呢？如果大家两篇都有看的话，就会发现有些地方使用CSS选择器会更加简单，而有些地方又用Xpath似乎更好，而且对于前端有优势的同学，使用CSS选择器的话学起来就更比啦！
【完】
