解析html：CSS Selector快速了解使用

最新推荐文章于 2022-09-13 01:00:00 发布

灰哥数据智能

最新推荐文章于 2022-09-13 01:00:00 发布

阅读量1.4k

点赞数

分类专栏： Python 数据采集

本文链接：https://blog.csdn.net/scut_yfli/article/details/107006782

版权

Python 同时被 2 个专栏收录

11 篇文章 2 订阅

订阅专栏

数据采集

9 篇文章 2 订阅

订阅专栏

CSS即层叠样式表，其选择器是一种用来确定HTML文档中某部分位置的语言。

html文档是由一系列节点构成的数，例如：

<html>
	<body>
		<div >
			<p>Hello world<p>
			<a href="/home">Click here</a>
		</div>
	</body>
</html>

一、html文档的节点类型

html文档的节点类型常见有以下几种：

根节点：文档的最底层节点

元素节点：一个元素的开始标签、结束标签，以及开始标签和结束标签之间的全部内容整体称为元素节点，如示例中的html、body、div、p、a

属性节点：元素节点中的属性为属性节点，属性节点包括属性名和属性值两个部分，如示例中的href属性名，/home属性值

文本节点：标签间的文本内容，如示例中的Hello world、Click here

节点之间存在几种关系：

父子：如示例中的，body是html的子节点，p和a是div的子节点。反过来，div是p和a的父节点

兄弟：p和a为兄弟节点

祖先/子孙：body、div、p、a都是html的子孙节点；反过来html是body、div、p、a的祖先节点

二、CSS选择器的常用语法

CSS选择器语法比Xpath简答一些，但功能不如Xpath强大。

实际上，当我们调用Scrapy的Selector对象的CSS方法时，在其内部会使用Python库的cssselect将CSS选择器表达式翻译成Xpath表达式，然后调用Selector对象的Xpath方法。

CSS选择器的基本语法如下：

* 选中所有元素

E 选中E元素

E1,E2 选中E1和E2元素

E1 E2 选中E1后代中的E2元素

E1>E2 选中E1子元素中的E2元素

E1+E2 选中E1兄弟元素中的E2元素

.CLASS 选中属性包含CLASS的元素

#ID1 选中属性id为ID1的元素

[ATTR] 选中包含ATTR属性的元素

[ATTR=VALUE] 选中包含ATTR属性且值为VALUE的元素

[ATTR~=VALUE] 选中包含ATTR属性且值包含VALUE的元素

E:first-child 选中E元素，且该元素必须是其父元素的第一个子元素

E:last-child 选中E元素，且该元素必须是其父元素的最后一个子元素

E:nth-child(n) 选中E元素，且该元素必须是其父元素的第n个子元素

E:nth-last-child(n) 选中E元素，且该元素必须是其父元素的倒数第n个子元素

三、CSS选择器使用实例

示例HTML文档

<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>

使用python的scrapy库进行测试（与后续爬虫处理保持一致）

from scrapy.selector import Selector
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='utf8')

（1）选中所有img元素

response.css('img')