CSS选择器是浏览器用来选择页面元素,执行效率比较高,每一种选择都有比较详细的解释、内容较长,请耐心阅读,有其他建议可在评论区讨论
以下内容有:
根据id选择
根据class选择
根据tag标签选择
根据后代元素选择
根据子元素选择
根据组(group)选择
根据兄弟节点选择
根据属性元素选择
小技巧:如果选择元素的时候,不确定选择的内容是不是该元素的唯一属性值,可以用ctrl + f 直接在页面查找,比如找一个元素class 是 bg s_btn_wr的值,如果右下角那里显示的是1,就说明是唯一值,如果显示的是多个,就说明不是唯一值。
1、根据id选择
查找到该元素的唯一id即可,比如根据这个百度输入框的 id
driver.find_element_by_css_selector(‘#kw‘) #css根据id选择元素,元素前面加一个#
1
2 、根据class 选择
选择该元素的唯一class属性值,比如根据“百度一下”这个的元素来定位,该元素的class=‘bg s_btn_wr’
(注意:bg后面有一个空格,所以该元素实际上有两个class)
#如果class只有一个的元素,比如代码段是这样的
<span class="soutu-btn"></span>
#用css选择器就是
driver.find_element_by_css_selector(‘.soutu-btn‘) #元素前面加一个.
#如果class=‘bg s_btn_wr‘ (有两个class),可以有以下三种写法
第一种: driver.find_element_by_css_selector(‘.bg‘)
第二种: driver.find_element_by_css_selector(‘.s_btn_wr‘)
(第一种跟第二种查找的时候会有一个弊端,比如第一种,会查找到所有class=‘bg‘的元素,第二种也是一样)
第三种:是可以唯一对应到的
driver.find_element_by_css_selector(‘.bg.s_btn_w‘)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
3、根据tag标签选择元素
比如根据标签名span选择
driver.find_element_by_css_selector(‘span‘)
1
4、后代元素选择
选择 “元素” 内部的 “元素”
语法 : <s1> <s2> 选择s1元素里面的所有s2元素 (可以是直接子节点,也可以不是)
比如
choose_car option 寻找id为choose_car的 option节点
driver.find_element_by_css_selector(‘#choose_car option‘)
footer p 的意思是找标签名是footer里面的p
driver.find_element_by_css_selector(‘footer p‘)
1
2
3
4
5
6
7
8
9
还有一种写法是很多级嵌套
查找ul里面的li ,li里面的div ,div里面的span
ul li div span
driver.find_element_by_css_selector(‘ul li div span‘)
1
2
5、子元素(child)选择
选择元素的子元素 (和后代选择器有不同之处)
元素跟元素直接是直接隶属的关系,可以用 >
#choose_car > option (option是choose_car的直接子节点)
choose_car是父级,option是子级 , 是直接隶属的关系
driver.find_element_by_css_selector(‘#choose_car > option‘)
footer > p也一样,也是直接隶属的关系
driver.find_element_by_css_selector(‘footer > p‘)
如果是很多级就是
driver.find_element_by_css_selector(‘ul > li > div > span‘)
1
2
3
4
5
6
7
8
9
10
6、组(group)选择
组元素: 可以同时选择多个元素,用逗号隔开
语法: <s1>,<s2>
比如 p ,button 意思是选择所有p节点跟button节点
#food,.cheese
选择所有id为food节点跟所有class为cheese的节点
#food > span , p
意思是选择所有id为food的所有span子元素跟所有p元素
(注意P不属于food)
#food > span , #food > p
选择id为food的所有span子元素和所有的p元素,这里的p是属于food的
#food > *
选择id为food的所有子元素
选择所有子元素就用 *
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
7、兄弟节点元素选择
兄弟节点选择:选择紧接在另一个元素后的元素,二者有相同的父元素
比如:
#food + div
是指选择id为food元素紧跟着的div (这两个是平级的)
#food ~ div
是指选择id为food元素后面所有的div (这两个元素之间也是平级的)
#food > div > p.special + a
div是food的子元素,p.special是div的子元素
选择id为food下面的元素里面的div,再选择div里面的p节点,class属性为special的元素 ,a元素是紧跟p.special的 (二者是平级的)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
8、属性元素选择器
*[style] 意思是选择所有具有style属性的元素
P[spec=len2] 选择所有p节点,有spec属性,并且spec的属性值等于len2的 (选中的就是上图test4这个元素)
P[spec=‘len2 len3‘] 选择所有p节点,有spec属性,并且spen属性等于len2 len3 (选中的就是test5)
P[spec*=‘len2‘] 选中所有P节点,只要spec属性有len2就能被选中
(选中的是test4跟test5)
P[spec^=‘len2‘] 选择所有P节点,有spec属性,并且是以len2开头的
P[spec$=‘len2‘] 选择所有P节点,有spec属性,并且以len2结尾的
P[class=special] [name=p1] 选择p节点中属性class=special,并且name=p1的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#food >p:nth_child(3)
选择父元素id为food的第三个子元素,选中的就是黄瓜PP
#food >p:nth_child(4)
选择父元素id为food的第四个子元素,选中的就是青菜
1
2
3
4
5
6
#food >p:nth_last_child(3)
选择id为food的倒数第三个元素
(选中的是空的,就是没有这个元素 p类型只有两个,倒数第三个是span)
1
2
3
#food >p:nth_of_type(2)
选择id为food的p类型的第二个节点,选中的就是青菜
1
2
#food >p:nth_last_of_type(2)
选择if为food的p类型的,倒数第二个节点,也就是黄瓜