selenium 之css选择器详解 ：单个选择器、组合选择器、兄弟节点选择、属性元素选择

CSS选择器是浏览器用来选择页面元素，执行效率比较高，每一种选择都有比较详细的解释、内容较长，请耐心阅读，有其他建议可在评论区讨论
以下内容有：

1. 根据id选择

2. 根据class选择

3. 根据tag标签选择

4. 根据后代元素选择

5. 根据子元素选择

6. 根据组（group）选择

7. 根据兄弟节点选择

8. 根据属性元素选择

小技巧：如果选择元素的时候，不确定选择的内容是不是该元素的唯一属性值，可以用ctrl + f 直接在页面查找，比如找一个元素class 是 bg s_btn_wr的值,如果右下角那里显示的是1，就说明是唯一值，如果显示的是多个，就说明不是唯一值。

1、根据id选择

查找到该元素的唯一id即可，比如根据这个百度输入框的 id

driver.find_element_by_css_selector('#kw')   #css根据id选择元素，元素前面加一个#

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'）

3、根据tag标签选择元素

比如根据标签名span选择

driver.find_element_by_css_selector('span')

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')

还有一种写法是很多级嵌套

查找ul里面的li ,li里面的div ，div里面的span

ul li div span
driver.find_element_by_css_selector('ul li div span')

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')

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的所有子元素 

选择所有子元素就用 *

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的 （二者是平级的）

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的元素

#food >p:nth_child(3)  
选择父元素id为food的第三个子元素，选中的就是黄瓜PP


#food >p:nth_child(4)
选择父元素id为food的第四个子元素，选中的就是青菜

#food >p:nth_last_child(3)
选择id为food的倒数第三个元素
（选中的是空的，就是没有这个元素 p类型只有两个，倒数第三个是span）

#food >p:nth_of_type(2)
选择id为food的p类型的第二个节点，选中的就是青菜

#food >p:nth_last_of_type(2)
选择if为food的p类型的，倒数第二个节点，也就是黄瓜