CSS即层叠样式表,其选择器是一种用来确定HTML文档中某部分
位置的语言。
CSS选择器的语法比XPath更简单一些,但功能不如XPath强大。
实际上,当我们调用Selector对象的CSS方法时,在其内部会使用Python库cssselect将CSS选择器表达式翻译成XPath表达式,然后调用Selector对象的XPATH方法。
表3-2列出了CSS选择器的一些基本语法。
| 表 达 式 | 描 述 | 例 子 |
|---|---|---|
| * | 选中所元素 | * |
| E | 选中E元素 | p |
| E1,E2 | 选中E1和E2 元素 | div,pre |
| E1 E2 | 选中E1后代元素中的E2元素 | div p |
| E1>E2 | 选中E1子元素中的E2元素 | div>p |
| E1+E2 | 选中E1兄弟元素中的E2元素 | p +strong |
| .CLASS | 选中CLASS属性包含CLASS的元素 | .info |
| #ID | 选中id属性为ID的元素 | #main |
| [ATTR] | 选中包含ATTR属性的元素 | [href] |
| [ATTR=VALUE] | 选中包含ATTR属性且值为VALUE的元素 | [method=post] |
| ATTR~=VALUE | 选中包含ATTR属性且值包含VALUE的元素 | [class~=clearfix] |
| E:nth-child(n) E:nth-last-child(n) | 选中E元素,且该元素必须是其父元素的***(倒数)第n个子元素*** | a:nth-child(1) a:nth-last-child(2) |
| E:first-child(n) E:last-child(n) | 选中E元素,且该元素必须是其父元素的***(倒数)第一个子元素*** | a:first-child a: last-child |
| E:empty | 选中没有子元素的E 元素 | div:empty |
| E::text | 选中E元素的文本节点(Text Node) | p:: text |
和学习XPath一样,通过一些例子展示CSS选择器的使用。
先创建一个HTML文档并构造一个HtmlResponse对象:
>>> from scrapy.selector import Selector
>>> from scrapy.http import HtmlResponse
>>> body ='''
Example website
Name: Image 0
Name: Image 1
Name: Image 2
Name: Image 3
Name: Image 4
Name: Image 5
'''
>>> response = HtmlResponse(url='http://www.example.com', body=body, encoding='utf-8')
>>> response
<200 http://www.example.com>
● E:选中E元素。
# 选中所有的img
>>> response.css('img')
>[,
,
,
,
,
]
● E1,E2:选中E1和E2元素。
# 选中所有base和title
>>> response.css('base,title')
>[,
]
● E1 E2:选中E1后代元素中的E2元素。
# div 后代中的img
>>> response.css('div img')
>[,
,
,
,
]
● E1>E2:选中E1子元素中的E2元素。
# body 子元素中的div
>>> response.css('body>div')
[]
● [ATTR]:选中包含ATTR属性的元素。
#选中包含style属性的元素
>>> response.css('[style]')
>[# 选中属性id值为images-1的元素
>>> response.css('[id=images-1]')
>[#选中每个div的第一个a
>>> response.css('div>a:nth-child(1)')
[,
]
# 选中第二个div的第一个a
>>> response.css('div:nth-child(2)>a:nth-child(1)')
>[]
● E:first-child:选中E元素,该元素必须是其父元素的第一个子元素。
● E:last-child:选中E元素,该元素必须是其父元素的倒数第一个子元素。
# 选中第一个div的最后一个a
>>> response.css('div:first-child>a:last-child')
>[]
● E::text:选中E元素的文本节点。
选中所有a的文本>>> sel = response.css('a::text')
>>> sel
>[,
,
,
,
,
,
,
,
,
,
,
]
>>> sel.extract()
> ['Name: Image 0 ',
' ',
'Name: Image 1 ',
' ',
'Name: Image 2 ',
' ',
'Name: Image 3 ',
' ',
'Name: Image 4 ',
' ',
'Name: Image 5 ',
关于CSS选择器的使用先介绍到这里,更多详细内容可以参看CSS选择器文档:https://www.w3.org/TR/css3-selectors/。
3.5 本章小结本章学习了从页面中提取数据的相关内容,首先带大家了解了Scrapy中的Selector对象,然后学习如何使用Selector对象在页面中选中并提取数据,最后通过一系列例子讲解了XPath和CSS选择器的用法。
本文参照《精通Scrapy网络爬虫+(刘硕著)》PDF,并自己跑相关代码,代码内容稍作修改,来对css的使用方法进行笔记及方法解读,仅做参考和笔记复习使用



