CSS选择器使用

时间：2021-01-31 23:23:47

今天要对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里左右两端的空格和\n,\r。 2.str.replace("a","b"):将str里所有的a由b代替。 '''
# 文章发布时间
>>> data_r = response.css(".entry-meta-hide-on-mobile::text").extract()[0] >>> data_r '\r\n\r\n 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]
'爬虫'
标签：

相关文章