selenium的css定位
使用xpath定位，基本能解决定位的需求，这里介绍cdd定位，是因为css定位更快，语法更简洁
一、css的属性定位
1、css可以通过元素的id、css、class 三个常规属性来定位到
如下是百度输入框的html代码
<input id="kw" class="s_ipt search" type="text" autocomplete="off" maxlength="100" name="wd">
css用 # 来表示id属性，如#kw
1⃣️driver.find_element_by_css_selector("#kw").send_keys("python")
2⃣️driver.find_element_by_css_selector("input#kw").send_keys("python")
3⃣️driver.find_element_by_css_selector("input[id='kw']").send_keys("python")
css用 . 来表示 class属性，如: .s_ipt
1⃣️driver.find_element_by_css_selector(".s_ipt").send_keys("python")
2⃣️driver.find_element_by_css_selector("input.s_ipt").send_keys("python")
3⃣️driver.find_element_by_css_selector("input[class='s_ipt']").send_keys("python")
使用多个class属性进行定位
driver.find_element_by_css_selector("input[class='s_ipt search']").send_keys("python")
driver.find_element_by_css_selector(".s_ipt .search").send_keys("python") # class不分先后顺序，均可定位到
css直接用便签名称，无任何表示符，如 input
driver.find_element_by_css_selector("input").send_keys("python")
二、css的其它属性
css除了可以通过标签、class、id这是三个常规属性定位，还可以使用其他属性定位
css通过name属性来定位
driver.find_element_by_css_selector("[name='wd']").send_keys("python")
css通过autocomplete属性定位
driver.find_element_by_css_selector("[autocomplete='off']").send_keys("python")
三、css标签
driver.find_element_by_css_selector("input:contains("kw")").send_keys("python")
css通过标签与class属性的组合定位
driver.find_element_by_css_selector("input.s_ipt").send_keys("python")
css通过标签与id属性的组合定位
driver.find_element_by_css_selector("input#kw").send_keys("python")
css通过标签与其他属性组合定位
driver.find_element_by_css_selector("input[id='kw']").send_keys("python")
四、css的层级关系
1、css也有与xpath同样功能的层级定位关系
2、如下面xpath的定位语法可以用css实现
1⃣️//form[@id='form']/span/input
2⃣️//form[@class='fm']/span/input
对应的css语法如下
1⃣️form#form>span>input
2⃣️form.form>span>input
li>#js-sigin-btn div>.search-input
五、通配符查找元素
css选择器中使用通配符
"^":代表以什么开头
"$"：代表以什么结尾
"*"：代表包含什么文本
语法： tag[attribute<通配符>='value']
示例：
div[class='search-area']
div[class^='search']
div[class$='area']
div[class*='ch-ar']
五、css索引
1、百度设置页面显示条数html代码如下<select id="nr" name="NR">
<option selected="" value="10">每页显示10条</option>
<option value="20">每页显示20条</option>
<option value="50">每页显示50条</option>
</selected>
2、css通过索引' tag_name:nth-chile(1) '来定位子元素，与xpath的语法差异有点大，但很好理解
driver.find_element_by_css_selector("select#nr>option:nth-child(1)").click() # 选择第一个option
driver.find_element_by_css_selector("select#nr>option:nth-child(2)").click() # 选择第二个option
driver.find_element_by_css_selector("select#nr>option:nth-child(3)").click() # 选择第三个option
六、css的逻辑运算
css也可以实现逻辑匀速哪，同时匹配两个实行，这里跟xpath不一样，无需写关键字 and
driver.find_element_by_css_selector("input[id='kw'][name='wd']").send_keys("python")
七、css模糊匹配
css模糊匹配的 contains("✖️")
