3.4 CSS选择器
CSS即层叠样式表，其选择器是一种用来确定HTML文档中某部分
位置的语言。
CSS选择器的语法比XPath更简单一些，但功能不如XPath强大。
实际上，当我们调用Selector对象的CSS方法时，在其内部会使用Python库cssselect将CSS选择器表达式翻译成XPath表达式，然后调用Selector对象的XPATH方法。
表3-2列出了CSS选择器的一些基本语法。
表3-2 CSS选择器 表 达 式描 述例 子选中所元素E选中E元素pE1,E2选中E1和E2 元素div,preE1 E2选中E1后代元素中的E2元素div pE1>E2选中E1子元素中的E2元素div>pE1+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-childE:empty选中没有子元素的E 元素div:emptyE::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元素。
>>> response.css('img')
>[<Selector xpath='descendant-or-self::img' data=''>,
<Selector xpath='descendant-or-self::img' data=''>,
<Selector xpath='descendant-or-self::img' data=''>,
<Selector xpath='descendant-or-self::img' data=''>,
<Selector xpath='descendant-or-self::img' data=''>,
<Selector xpath='descendant-or-self::img' data=''>]
● E1,E2：选中E1和E2元素。
>>> response.css('base,title')
>[<Selector xpath='descendant-or-self::base | descendant-or-self::title' data=''>,
<Selector xpath='descendant-or-self::base | descendant-or-self::title' data='Example website'>]
● E1 E2：选中E1后代元素中的E2元素。
>>> response.css('div img')
>[<Selector xpath='descendant-or-self::div/descendant-or-self::*/img' data=''>,
<Selector xpath='descendant-or-self::div/descendant-or-self::*/img' data=''>,
<Selector xpath='descendant-or-self::div/descendant-or-self::*/img' data=''>,
<Selector xpath='descendant-or-self::div/descendant-or-self::*/img' data=''>,
<Selector xpath='descendant-or-self::div/descendant-or-self::*/img' data=''>]
● E1>E2：选中E1子元素中的E2元素。
>>> response.css('body>div')
[<Selector xpath='descendant-or-self::body/div' data='>,
<Selector xpath='descendant-or-self::body/div' data='\n\t ...'>]
● [ATTR]：选中包含ATTR属性的元素。
>>> response.css('[style]')
>[<Selector xpath='descendant-or-self::*[@style]' data='>]
● [ATTR=VALUE]：选中包含ATTR属性且值为VALUE的元素。
>>> response.css('[id=images-1]')
>[<Selector xpath="descendant-or-self::*[@id = 'images-1']" data='>]
● E:nth-child(n)：选中E元素，且该元素必须是其父元素的第n个子元素。
>>> response.css('div>a:nth-child(1)')
[<Selector xpath='descendant-or-self::div/a[count(preceding-sibling::*) = 0]' data='Name: Image 1 >,
<Selector xpath='descendant-or-self::div/a[count(preceding-sibling::*) = 0]' data='Name: Image 4 >]
>>> response.css('div:nth-child(2)>a:nth-child(1)')
>[<Selector xpath='descendant-or-self::div[count(preceding-sibling::*) = 2]/a[count(preceding-sibling::*) = 0]' data='Name: Image 4 >]
● E:first-child：选中E元素，该元素必须是其父元素的第一个子元素。
● E:last-child：选中E元素，该元素必须是其父元素的倒数第一个子元素。
>>> response.css('div:first-child>a:last-child')
>[<Selector xpath='descendant-or-self::div[count(following-sibling::*) = 0]/a[count(preceding-sibling::*) = 0]' data='Name: Image 4 >]
● E::text：选中E元素的文本节点。
选中所有a的文本
>>> sel = response.css('a::text')
>>> sel
>[<Selector xpath='descendant-or-self::a/text()' data='Name: Image 0 '>,
<Selector xpath='descendant-or-self::a/text()' data=' '>,
<Selector xpath='descendant-or-self::a/text()' data='Name: Image 1 '>,
<Selector xpath='descendant-or-self::a/text()' data=' '>,
<Selector xpath='descendant-or-self::a/text()' data='Name: Image 2 '>,
<Selector xpath='descendant-or-self::a/text()' data=' '>,
<Selector xpath='descendant-or-self::a/text()' data='Name: Image 3 '>,
<Selector xpath='descendant-or-self::a/text()' data=' '>,
<Selector xpath='descendant-or-self::a/text()' data='Name: Image 4 '>,
<Selector xpath='descendant-or-self::a/text()' data=' '>,
<Selector xpath='descendant-or-self::a/text()' data='Name: Image 5 '>,
<Selector xpath='descendant-or-self::a/text()' data=' '>]
>>> sel.extract()
> ['Name: Image 0 ',
' ',
'Name: Image 1 ',
' ',
'Name: Image 2 ',
' ',
'Name: Image 3 ',
' ',
'Name: Image 4 ',
' ',
'Name: Image 5 ',
3.5 本章小结
本章学习了从页面中提取数据的相关内容，首先带大家了解了Scrapy中的Selector对象，然后学习如何使用Selector对象在页面中选中并提取数据，最后通过一系列例子讲解了XPath和CSS选择器的用法。
本文参照《精通Scrapy网络爬虫+（刘硕著）》PDF，并自己跑相关代码，代码内容稍作修改，来对css的使用方法进行笔记及方法解读，仅做参考和笔记复习使用
Original: https://blog.csdn.net/qq_27608761/article/details/121028927
Author: lee’s work
Title: Chapter3.4/3.5 scrapy-css选择器及本章小结
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/792368/
转载文章受原作者版权保护。转载请注明原作者出处！