CSS选择器

测试样例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>标签标题</title> 
</head>

<body>
	<h1 class="title">文章标题</h1>
	<div>
		<h2 class="sub_title">文章副标题</h2>
		<p class="keywords">关键词er</p>
	</div>

	<div>
		<span>
			<p>摘要内容</p>
		</span>
		<p class="p_text bg-blue">这是第一个段落。</p>
		<p class="p_text bg-black">这是第二个段落。</p>
		<img src="klematis.jpg" title="klematis flower" width="150" height="113" />
		<img src="img_flwr.gif" title="flowers" width="224" height="162" />
		<img src="landscape.jpg" title="landscape" width="160" height="120" />
		<p class="p_text bg-green">这是第三个段落。</p>
		<p class="p_text bg-grey">这是第四个段落。</p>
	</div>

	<p id="copyright">版权信息</p>
	<p lang="en">Hello!</p>
	<p lang="en-us">Hi!</p>
	<p lang="en-gb">Ello!</p>
</body>
</html>

测试方法

  • 浏览器的控制台，document.querySelector(“【表达式】”)
  • 用Python执行测试

语法

详见 👇

常用选取器 样例 表达式
::text 提取选取器中的文本 .title::text
.class 选取 class 为 title 的节点 .title
#id 选取 id 为 copyright 的节点 #copyright
* 选取所有节点 *
element 选取所有 img 节点 img
element,element 选取所有 p 节点和 img 节点 p,img
element element 选取 div 节点内的所有 p 节点 div p
element>element 选取所有父级是 div 节点的 p 节点 div>p
element+element 选取所有紧跟在 div 节点之后的第一个 p 节点 div+p
[attribute] 选取所有带有id属性节点 [id]
[attribute=value] 选取所有使用class=”sub_title”的节点 [class="sub_title"]
[attribute~=value] 选取标题属性包含单词”flower”的所有节点 [title~=flower]
`[attribute =language]` 选取 src属性等于 en，或者以 en- 为开头的所有节点
[attribute^=value] 选取每一个src属性的值以”img_”开头的 img 节点 img[src^=img_]
[attribute$=value] 选取每一个src属性的值以”.gif”结尾的节点 [src$=".gif"]
[attribute*=value] 选取每一个class属性的值包含子字符串”bg-“的 p 节点 p[class*="bg-"]
:nth-child(n) 选取每个p节点是其父级的第2个子节点 p:nth-child(2)

测试结果

from scrapy.selector import Selector


text = '''
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>标签标题</title> 
</head>

<body>
	<h1 class="title">文章标题</h1>
	<div>
		<h2 class="sub_title">文章副标题</h2>
		<p class="keywords">关键词er</p>
	</div>

	<div>
		<span>
			<p>摘要内容</p>
		</span>
		<p class="p_text bg-blue">这是第一个段落。</p>
		<p class="p_text bg-black">这是第二个段落。</p>
		<img src="klematis.jpg" title="klematis flower" width="150" height="113" />
		<img src="img_flwr.gif" title="flowers" width="224" height="162" />
		<img src="landscape.jpg" title="landscape" width="160" height="120" />
		<p class="p_text bg-green">这是第三个段落。</p>
		<p class="p_text bg-grey">这是第四个段落。</p>
	</div>

	<p id="copyright">版权信息</p>
	<p lang="en">Hello!</p>
	<p lang="en-us">Hi!</p>
	<p lang="en-gb">Ello!</p>
</body>
</html>
'''

# result = Selector(text=text).css('.title::text').getall()
# result = Selector(text=text).css('#copyright::text').getall()

# result = Selector(text=text).css('img').getall()
# result = Selector(text=text).css('p , img').getall()
# result = Selector(text=text).css('div p').getall()
# result = Selector(text=text).css('div > p').getall()
# result = Selector(text=text).css('div + p').getall()

# result = Selector(text=text).css('[class="sub_title"]').getall()
# result = Selector(text=text).css('[title~=flower]').getall()
# result = Selector(text=text).css('[src$=".gif"]').getall()
# result = Selector(text=text).css('p[class*="bg-"]').getall()
result = Selector(text=text).css('p:nth-child(2)').getall()

print(result)
爬亿爬 > 抽取
#CSS抽取
CSS选择器
https://元气码农少女酱.我爱你/f1368cc224d2/
作者
元气码农少女酱
发布于
2023年5月2日
许可协议