selenium的css表达式选择元素

一、css表达式的写法：
find_element_by_css_selector(CSS Selector参数) 或
find_elements_by_css_selector(CSS Selector参数)

1.找class的属性，使用点“.”表示，如
find_element_by_css_selector(’.plan’)

2.找id的属性，使用“#”表示，如
find_element_by_css_selector(’#su’)

-=============================================================================-

二、子元素 和 后代元素
1.子元素 用“>”表示，如
find_element_by_css_selector(’.plan > #su’)

2.后代元素 用 “空格” 表示，如
find_element_by_css_selector(’.plan #su’)

3.子元素“>” 和 后代元素“空格” 可以混用，如
find_element_by_css_selector(’.plan > #su div’)

-=============================================================================-

三、其他元素
1.找其他元素的值用 [ ] 表示，如
find_element_by_css_selector(’[href=“http://www.baidu.com”]’)

2.也可以上例方法混用，如
find_element_by_css_selector(’.plan > #su div[href=“http://www.baidu.com”]’)

-=============================================================================-

四、验证css表达式
1.在网页上F12后，按“ctrl + F”，在下列数控如框下验证css表达式是否正确

-=============================================================================-

五、and 的用法
1.and的用 “," 逗号表示，如
find_element_by_css_selector(’.plan , div[href=“http://www.baidu.com”]’)

-=============================================================================-

六、根据次序选择元素
1.次序选择元素用 nth-child(1)，如
find_element_by_css_selector(‘span:nth-child(2)’)
#父元素里的第二个子节点，同时要满足span开头

find_element_by_css_selector(‘nth-child(2)’)
#父元素里的第二个子节点

2.倒数 选择元素用 nth-last-child(1)，如
find_element_by_css_selector(‘p:nth-child(1)’)
#父元素里的倒数第一个子节点，同时要满足p开头

find_element_by_css_selector(‘nth-child(2)’)
#父元素里的倒数第二个子节点

3.父元素的第几个某类型的子节点 用 nth-of-type(1)
find_element_by_css_selector(‘p:nth-of-type(2)’)
#P元素的第2 个子节点

倒数用 nth-last-of-type(1)

4.奇数节点 和 偶数节点
偶数节点，使用 nth-child(even)，如
p:nth-child(even)
#所有类型的P开头的奇数子节点

奇数节点，使用 nth-child(odd)，如
p:nth-child(odd)
#所有类型的P开头的奇数子节点

也可以用
p:nth-of-type(even)
p:nth-of-type(odd)

-=============================================================================-

七、兄弟节点选择
1.相邻兄弟节点选择用”+“，如
find_element_by_css_selector(‘p + div’)

2.后续所有兄弟节点选择用”~“，如
find_element_by_css_selector(‘h3 ~ span’)
#h3后面所有包含span的兄弟节点

注：以上的所有css选择方法都可以灵活组合使用。