# css选择器 {#css选择器}
本文介绍下常用的css选择器,css选择器可用于如下几个用途:1.通过css选择器定义css样式; 2.通过css选择器查找期望的html标签(可应用于爬虫程序实现标签的定位,如golang开发框架goquery或gocolly就是基于css选择器)。
# 1. 常用的css选择器 {#_1-常用的css选择器}
需要额外关注如下几个选择器,在爬虫应用中经常用到:
# 1.1 匹配第n个孩子节点 {#_1-1-匹配第n个孩子节点}
语法: :nth-child(n)
:
前可以指定标签类型,也可以不指定。
n的最大取值为孩子数量
- 示例1
div:nth-child(2)
实现的功能: 匹配第2个子节点, 且第2个子节点是div。
注意: 若第2个标签不是div标签,或者说我们期望匹配的div标签并不是排列第2,则会匹配失败。
针对首个或末尾元素的匹配, 还额外定义了快捷选择器: :first-child
、:last-child
。
- 示例2
body :nth-child(2)
实现的功能: 匹配body标签的第2个子节点(不限制第2个子节点的标签类型)
# 1.2 匹配第n个孩子节点(从后往前数) {#_1-2-匹配第n个孩子节点-从后往前数}
语法: :nth-last-child(n)
功能同:nth-child(n)
,只是n的计算顺序不同。
# 1.3 匹配第n个指定类型
的孩子节点 {#_1-3-匹配第n个指定类型的孩子节点}
语法: :nth-of-type(n)
n的最大取值为同类型的孩子数量
功能类似于:nth-child(n)
,区别: :nth-child(n)
数的是孩子, :nth-of-type(n)
数的是指定标签类型的孩子,导致n值的参考范围不同。
针对首个或末尾元素的匹配, 还额外定义了快捷选择器: :first-of-type
、:last-of-type
。
# 1.4 匹配第n个指定类型
的孩子节点(从后往前数) {#_1-4-匹配第n个指定类型的孩子节点-从后往前数}
语法: :nth-last-of-type(n)
功能同:nth-of-type(n)
,只是n的计算顺序不同。
# 1.5 取反选择器 {#_1-5-取反选择器}
语法: :not(selector)
将选择器使用:not()
包住,则会取反。取反选择器可用于排除某些特定元素。
注意,若selector部分使用的是多个选择器的组合,最终选取的元素可能并不是我们期望的(原因未知, 如
div:not(.title)
是可以的,而:not(div.title)
不可以)。
# 2. 资料 {#_2-资料}
其它选择器的用法详见css选择器 (opens new window)。