CSS选择器——cssSelector定位方式详解

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类型的，倒数第二个节点，也就是黄瓜