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元素,且该元素必须是父元素的第n个子元素 | a:nth-child(1) |
E:nth-last-child(n) | 选中E元素,且该元素必须是父元素的**(倒数)**第n个子元素 | a:nth-last-child(2) |
E:first-child | 选中E元素,且该元素必须是父元素的第一个子元素 | a:first-child |
E:last-child | 选中E元素,且该元素必须是父元素的**(倒数)**第一个子元素 | a:last-child |
E:emty | 选中没有子元素的E元素 | div:empty |
E::text | 选中E元素的文本节点(Text Node) | p::text |
# 《精通 scrapy 网络爬虫》第3章 第4节(即3.4)CSS 实例
from scrapy.http import HtmlResponse
body = '''
<html>
<head>
<base href='http://example.com'/>
<title>Example website</title>
</head>
<body>
<div id='images-1' style="width:1230px;">
<a href='image1.html'>Name:Image 1 <br/><img src="image1.jpg"/></a>
<a href='image2.html'>Name:Image 2 <br/><img src="image2.jpg"/></a>
<a href='image3.html'>Name:Image 3 <br/><img src="image3.jpg"/></a>
</div>
<div id="images-2" class="small">
<a href='image4.html'>Name:Image 4 <br/><img src="image4.jpg"/></a>
<a href='image5.html'>Name:Image 5 <br/><img src="image5.jpg"/></a>
</div>
</body>
</html>
'''
response = HtmlResponse(url='http://www.example.com/', body=body, encoding='utf-8')
# E:选中E元素
print('[1]==========E:选中E元素==========')
print(response.css('img')) # 等同于 print(response.xpath('//img'))
# E1,E2:选中E1和E2元素
print('[2]==========E1,E2:选中E1和E2元素==========')
print(response.css('base,title'))
# E1 E2:选中E1后代中E2元素
print('[3]==========E1 E2:选中E1后代中E2元素==========')
print(response.css('div img')) # 等同 print(response.xpath('//div//img'))
# E1>E2:选中E1元素中的E2元素
print('[4]==========E1>E2:选中E1元素中的E2元素==========')
print(response.css('body>div'))
# [ATTR]:选中包含ATTR属性的元素
print('[5]==========[ATTR]:选中包含ATTR属性的元素==========')
print(response.css('[style]')) # print(response.xpath('//div/@style'))
# [ATTR=VALUE]:选中包含ATTR属性且值为VALUE的元素
print('[6]==========[ATTR=VALUE]:选中包含ATTR属性且值为VALUE的元素==========')
print(response.css('[id="images-1"]')) # print(response.xpath('//div[@id="images-1"]'))
# E:nth-child(n):选中E元素,且该元素必须是其父元素的第n个子元素
print('[7]==========E:nth-child(n):选中E元素,且该元素必须是其父元素的第n个子元素==========')
# 选中每个div的第一个
print(response.css('div>a:nth-child(1)'))
# 选中第二个div的第一个
print(response.css('div:nth-child(2)>a:nth-child(1)'))
# E:first-child:选中E元素,该元素必须其父元素的第一个子元素
# E:last-child:选中E元素,该元素必须其父元素的倒数第一个子元素
print(response.css('div:first-child>a:first-child'))
print(response.css('div:last-child>a:last-child'))
# E::text:选中E元素的文本节点
print('[8]==========E::text:选中E元素的文本节点==========')
print(response.css('a::text').extract()) # print(response.xpath('//a/text()').extract())
---------------------------
D:\Python38\python.exe D:/Project0611/ScrapyBook/practise/scrapySelectorCSSTest.py
[1]==========E:选中E元素==========
[<Selector xpath='descendant-or-self::img' data='<img src="image1.jpg">'>, <Selector xpath='descendant-or-self::img' data='<img src="image2.jpg">'>, <Selector xpath='descendant-or-self::img' data='<img src="image3.jpg">'>, <Selector xpath='descendant-or-self::img' data='<img src="image4.jpg">'>, <Selector xpath='descendant-or-self::img' data='<img src="image5.jpg">'>]
[2]==========E1,E2:选中E1和E2元素==========
[<Selector xpath='descendant-or-self::base | descendant-or-self::title' data='<base href="http://example.com">'>, <Selector xpath='descendant-or-self::base | descendant-or-self::title' data='<title>Example website</title>'>]
[3]==========E1 E2:选中E1后代中E2元素==========
[<Selector xpath='descendant-or-self::div/descendant-or-self::*/img' data='<img src="image1.jpg">'>, <Selector xpath='descendant-or-self::div/descendant-or-self::*/img' data='<img src="image2.jpg">'>, <Selector xpath='descendant-or-self::div/descendant-or-self::*/img' data='<img src="image3.jpg">'>, <Selector xpath='descendant-or-self::div/descendant-or-self::*/img' data='<img src="image4.jpg">'>, <Selector xpath='descendant-or-self::div/descendant-or-self::*/img' data='<img src="image5.jpg">'>]
[4]==========E1>E2:选中E1元素中的E2元素==========
[<Selector xpath='descendant-or-self::body/div' data='<div id="images-1" style="width:1230p...'>, <Selector xpath='descendant-or-self::body/div' data='<div id="images-2" class="small">\n ...'>]
[5]==========[ATTR]:选中包含ATTR属性的元素==========
[<Selector xpath='descendant-or-self::*[@style]' data='<div id="images-1" style="width:1230p...'>]
[6]==========[ATTR=VALUE]:选中包含ATTR属性且值为VALUE的元素==========
[<Selector xpath="descendant-or-self::*[@id = 'images-1']" data='<div id="images-1" style="width:1230p...'>]
[7]==========E:nth-child(n):选中E元素,且该元素必须是其父元素的第n个子元素==========
[<Selector xpath='descendant-or-self::div/a[count(preceding-sibling::*) = 0]' data='<a href="image1.html">Name:Image 1 <b...'>, <Selector xpath='descendant-or-self::div/a[count(preceding-sibling::*) = 0]' data='<a href="image4.html">Name:Image 4 <b...'>]
[<Selector xpath='descendant-or-self::div[count(preceding-sibling::*) = 1]/a[count(preceding-sibling::*) = 0]' data='<a href="image4.html">Name:Image 4 <b...'>]
[<Selector xpath='descendant-or-self::div[count(preceding-sibling::*) = 0]/a[count(preceding-sibling::*) = 0]' data='<a href="image1.html">Name:Image 1 <b...'>]
[<Selector xpath='descendant-or-self::div[count(following-sibling::*) = 0]/a[count(following-sibling::*) = 0]' data='<a href="image5.html">Name:Image 5 <b...'>]
[8]==========E::text:选中E元素的文本节点==========
['Name:Image 1 ', 'Name:Image 2 ', 'Name:Image 3 ', 'Name:Image 4 ', 'Name:Image 5 ']
Process finished with exit code 0