CSS选择器和Xpath学习笔记

2018-03-06

CSS选择器

CSS选择器是scrapy爬虫中使用的一类选择器,可以让爬虫寻找到特定的信息而不需要一次性下载大量无用信息

CSS选择器

选择所有标签: *

选择< a >标签:a

选择所有 class = “link”的元素: .link

选择classs = “link”的< a >标签: a.link

选择 id = “home”的< a >标签:a#home

选择父元素为< a >标签的所有子标签:a > span

选择< a >标签内部的所有 标签: a span

选择 title属性为”Home”的所有标签:a [title=Home]

基本选择器

选择器	含义
*	通用元素选择器，匹配任何元素
E	标签选择器，匹配所有使用E标签的元素
.class	类选择器，匹配class包含(不是等于)特定类的元素
#id	id选择器，匹配所有id属性等于id的元素

实例

* { margin:0; padding:0; }

p { font-size:2em; }

.info { background:#ff0; }

p.info { background:#ff0; }

p.info.error { color:#900; font-weight:bold; }

#info { background:#ff0; }

p#info { background:#ff0; }

多元素组合选择器

选择器	含义
E,F	多元素选择器，用”,分隔，同时匹配元素E或元素F
E F	后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
E>F	子元素选择器，用”>”分隔，匹配E元素的所有直接子元素
E+F	直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F	普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
.class1.class2	这个姑且也算一个吧，没什么名字，匹配类名中既包含class1又包含class2的元素

实例

div p { color:#f00; }

#nav li { display:inline; }

#nav a { font-weight:bold; }

div > strong { color:#f00; }

p + p { color:#f00; }

属性选择器

选择器	含义
E[attr]	匹配所有具有属性attr的元素，div[id]就能取到所有id属性的div
E[attr=value]	匹配属性attr值为value的元素，div[id=test],匹配id=test的div
E[attr~=value]	匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
E[attr	=value]	匹配所有att属性具有多个”-”分隔、其中一个值以value开头的元素，主要用于lang属性，比如“en”、“en-us”
E[attr ^=value]	匹配属性attr的值以value开头的元素
E[attr $=value]	匹配属性attr的值以value结尾的元素
E[attr *=value]	匹配属性attr的值包含value的元素

实例

p[title] { color:#f00; }

div[class=error] { color:#f00; }

td[headers~=col1] { color:#f00; }

p[lang|=en] { color:#f00; }

blockquote[class=quote][cite] { color:#f00; }

div[id^="nav"] { background:#ff0; }

在Scrapy中提取文本

1	css(".Intro::text").extract_first(default='')

同样也支持 extract() 、extract_first() 和 re() 方法

Xpath

选择所有标签: //*

选择< a >标签://a

选择所有 class = “link”的元素: //*[contains(@class,'link')]

选择classs = “link”的< a >标签: //a[contains(@class,'link')]

选择 id = “home”的< a >标签://*[@id='home']

选择父元素为< a >标签的所有子标签://a/apan

选择< a >标签内部的所有 标签: a span

选择 title属性为”Home”的所有标签:a [title=Home]

基础表达式

表达式	含义
nodename	选取此节点的所有子节点。
/	从根节点选取。
//	从匹配选择的当前节点选择文档中的节点，而不考虑它们的位置。
.	选取当前节点。
..	选取当前节点的父节点。
@	选取属性。

路径表达式

表达式	含义
bookstore	选取 bookstore 元素的所有子节点。
/bookstore	选取根元素 bookstore。注释：假如路径起始于正斜杠( / )，则此路径始终代表到某元素的绝对路径！
bookstore/book	选取属于 bookstore 的子元素的所有 book 元素。
//book	选取所有 book 子元素，而不管它们在文档中的位置。
bookstore//book	选择属于 bookstore 元素的后代的所有 book 元素，而不管它们位于 bookstore 之下的什么位置。
//@lang	选取名为 lang 的所有属性。

谓语（Predicates）

表达式	含义
/bookstore/book[1]	选取属于 bookstore 子元素的第一个 book 元素。
/bookstore/book[last()]	选取属于 bookstore 子元素的最后一个 book 元素。
/bookstore/book[last()-1]	选取属于 bookstore 子元素的倒数第二个 book 元素。
/bookstore/book[position()<3]	选取最前面的两个属于 bookstore 元素的子元素的 book 元素。
//title[@lang]	选取所有拥有名为 lang 的属性的 title 元素。
//title[@lang=’eng’]	选取所有 title 元素，且这些元素拥有值为 eng 的 lang 属性。
/bookstore/book[price>35.00]	选取 bookstore 元素的所有 book 元素，且其中的 price 元素的值须大于 35.00。
/bookstore/book[price>35.00]/title	选取 bookstore 元素中的 book 元素的所有 title 元素，且其中的 price 元素的值须大于 35.00。

选取未知结点

表达式	含义
*	匹配任何元素节点。
@*	匹配任何属性节点。
node()	匹配任何类型的节点。

例如
| 表达式 | 含义 |
| :——————-: |:——————-:|
| /bookstore/ | 选取 bookstore 元素的所有子元素。|
| // | 选取文档中的所有元素。|
| //title[@*] | 选取所有带有属性的 title 元素。|

选取若干路径

通过在路径表达式中使用”|”运算符，您可以选取若干个路径。
在下面的表格中，我们列出了一些路径表达式，以及这些表达式的结果：

//book/title | //book/price:选取 book 元素的所有 title 和 price 元素。

//title | //price: 选取文档中的所有 title 和 price 元素。

/bookstore/book/title | //price: 选取属于 bookstore 元素的 book 元素的所有 title 元素，以及文档中所有的 price 元素。