51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

css选择器

# 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. 示例1div:nth-child(2)
    实现的功能: 匹配第2个子节点, 且第2个子节点是div。

注意: 若第2个标签不是div标签,或者说我们期望匹配的div标签并不是排列第2,则会匹配失败。

针对首个或末尾元素的匹配, 还额外定义了快捷选择器: :first-child:last-child

  1. 示例2body :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)

赞(0)
未经允许不得转载:工具盒子 » css选择器