CSS选择器使用

今天要对CSS选择器的使用方法做一个全面的总结（几乎全部是从这篇文章摘抄的 https://blog.csdn.net/qq_39241986/article/details/82185697）

CSS选择器常用类型

常用的5大CSS选择器：
# 1.元素选择器：又称为标签选择器，根据标签名来固定样式作用范围。
eg.对页面所有p标签样式限定：
p{
font-size:12px;  # 字体大小
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选择器，比如伪类选择器、通用选择器、群组选择器等，我就不赘述了，大家要用百度谷歌
一下就可以了嘿嘿。

举例练习，爬取 http://python.jobbole.com/89196/ 网页的内容

# -*- 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()[0]
        # 发布日期
        data_r = response.css(".entry-meta-hide-on-mobile::text").extract()[0].strip()
        data_time = data_r.replace('·','').strip()
        # 文章分类
        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

        # 文章简介
        summary = response.css(".entry > blockquote:nth-child(2) > p:nth-child(1)::text").extract()[0]
        # 点赞数
        praise_number = int( response.css("#89196votetotal::text").extract()[0])
        # 收藏数
        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])

        print("文章标题："+title)
        print("发布日期："+data_time)
        print("文章分类："+article_type)
        print("文章简介："+summary)
        print("点赞数："+str(praise_number))
        print("收藏数："+str(collection_number))

 

>>> response.css(".entry-header h1").extract()
['<h1>爬虫进阶：反反爬虫技巧</h1>']

我们发现文章标题并没被完全取出，还是被h1标签包裹着，有两种方法获取文字： 
方法一：正则表达式获取（麻烦）

>>> title = response.css(".entry-header h1").extract()[0]
>>> reg_01 = "<h1>(.*?)</h1>"
>>> title = re.findall(reg_01,title)[0]
>>> title
'爬虫进阶：反反爬虫技巧'

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

>>> title = response.css(".entry-header h1 ::text").extract()[0]
>>> title
'爬虫进阶：反反爬虫技巧’

获取文章发布时间

'''
预备小知识：
1.str.strip():可以去除str里左右两端的空格和
,
。
2.str.replace("a","b"):将str里所有的a由b代替。
'''
# 文章发布时间
>>> data_r = response.css(".entry-meta-hide-on-mobile::text").extract()[0]
>>> data_r
'

            2018/06/28 ·  '
>>> data_r = data_r.strip()
>>> data_r
'2018/06/28 ·'
>>> data_time = data_r.replace('·','').strip()
>>> data_time
'2018/06/28'

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

# 点赞数：h10下id为89196votetotal，因为页面内该id值唯一，故可以直接用id选择器
>>> response.css("#89196votetotal::text").extract()[0]
'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()[0]
' 6 收藏'
>>> import re
>>> reg_02 = '.*(d+).*'
>>> collection_str = response.css("span.btn-bluet-bigger:nth-child(2)::text").extract()[0]
>>> re.findall(reg_02,collection_str)[0]
'6'
或用collection_str = collection_str[0:3].strip()

# 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()[0]
'  评论'
# 如果有评论的话，和收藏数一样，用正则表达式匹配数字即可，自己找篇有评论的试试吧~

文章简介

>>> response.css(".entry > blockquote:nth-child(2) > p:nth-child(1)::text").extract()[0]
'主要针对以下四种反爬技术：Useragent过滤；模糊的Javascript重定向；验证码；请求头一致性检查。'

文章分类

>>> response.css(".entry-meta-hide-on-mobile > a:nth-child(1)::text").extract()[0]
'实践项目'
>>> response.css(".entry-meta-hide-on-mobile > a:nth-child(2)::text").extract()[0]
'爬虫'