了解前端知识的人应该对css比较熟悉。它用于为html页面添加样式和布局。css的定位包括类、ID选择器、元素属性选择器和伪类。其实selenium的css定位和页面的css语法很像，都是异卵双胞胎的意思。为什么不是同卵双胞胎？因为他们之间还是有一些区别的。现在我们来具体研究一下。

1。通过属性定位元素

CSS选择器可以通过元素的id、class和tag这三个常规属性直接定位目标元素。

例如:

<input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">'''1.学习目标: 必须掌握selenium中css定位方法2.语法 2.1 在selenium中语法 (1)driver.find_element_by_css_selector("css选择器定位策略") (2)driver.find_elements_by_css_selector("css选择器定位策略") 2.2 css表达式写法 (1)#表示id属性 #id属性值 例如: #telA (2).表示class属性 .class属性值 例如: .telA (3)其他属性 [属性名=属性值] 例如: [name=telA]3.需求 在页面中,使用css定位电话A输入框'''# 1.导入seleniumfrom selenium import webdriverfrom time import sleepimport os# 2.打开浏览器driver = webdriver.Chrome()# 3.打开页面url = "file:///" + os.path.abspath("./练习页面/注册A.html")driver.get(url)# 4.定位电话A标签,使用css selector# 4.1 通过id定位telA_1 = driver.find_element_by_css_selector("#telA")print(telA_1.get_attribute("outerHTML"))# 4.2 通过class属性定位telA_2 = driver.find_element_by_css_selector(".telA")print(telA_2.get_attribute("outerHTML"))# 4.3 通过其他属性定位telA_3 = driver.find_element_by_css_selector("[name='telA']")print(telA_3.get_attribute("outerHTML"))# 5.关闭浏览器sleep(2)driver.quit()'''输出结果：<input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value=""><input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value=""><input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">'''

2。通过标签定位元素

例如:

<input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">'''1.学习目标: 必须掌握selenium中css定位方法2.语法 2.1 在selenium中语法 (1)driver.find_element_by_css_selector("css选择器定位策略") (2)driver.find_elements_by_css_selector("css选择器定位策略") 2.2 css表达式写法 标签+属性 格式：标签名[属性名=属性值]3.需求 在页面中,使用css定位电话A输入框'''# 1.导入seleniumfrom selenium import webdriverfrom time import sleepimport os# 2.打开浏览器driver = webdriver.Chrome()# 3.打开页面url = "file:///" + os.path.abspath("./练习页面/注册A.html")driver.get(url)# 4.定位电话A标签,使用css selector# 标签+属性# 通过name属性telA = driver.find_element_by_css_selector("input[name='telA']")# 通过id属性telA_1 = driver.find_element_by_css_selector("input#telA")print(telA.get_attribute("outerHTML"))print(telA_1.get_attribute("outerHTML"))# 5.关闭浏览器sleep(2)driver.quit()'''输出结果：<input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value=""><input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">'''

3。通过层次关系定位元素

例如:

<p id="p1"> <label for="userA">账号A</label> <input type="textA" name="userA" id="userA" placeholder="账号A" required="" value=""></p>'''1.学习目标: 必须掌握selenium中css定位方法2.语法 2.1 在selenium中语法 (1)driver.find_element_by_css_selector("css选择器定位策略") (2)driver.find_elements_by_css_selector("css选择器定位策略") 2.2 css表达式写法 层级定位 需要使用 > 或 空格表示层级关系 格式：父标签名[父标签属性名=属性值]>子标签名3.需求 在页面中,使用css定位账号A输入框'''# 1.导入seleniumfrom selenium import webdriverfrom time import sleepimport os# 2.打开浏览器driver = webdriver.Chrome()# 3.打开页面url = "file:///" + os.path.abspath("./练习页面/注册A.html")driver.get(url)# 4.定位账号A标签,使用css selector层级定位textA_1 = driver.find_element_by_css_selector("p#p1 input")print(textA_1.get_attribute("outerHTML"))# 5.关闭浏览器sleep(2)driver.quit()'''输出结果：<input type="textA" name="userA" id="userA" placeholder="账号A" required="" value="">'''

4。通过索引定位元素

例如:

<div id="zc"> <fieldset> <legend>注册用户A</legend> <p id="p1"> <label for="userA">账号A</label> <input type="textA" name="userA" id="userA" placeholder="账号A" required="" value=""> </p> <p> <label for="password">密码A</label> <input type="password" name="passwordA" id="passwordA" placeholder="密码A" value=""> </p> </fieldset></div>'''1.学习目标: 必须掌握selenium中css定位方法2.语法 2.1 在selenium中语法 (1)driver.find_element_by_css_selector("css选择器定位策略") (2)driver.find_elements_by_css_selector("css选择器定位策略") 2.2 css表达式写法 索引定位 （1）父标签名[父标签属性名=属性值]>:nth-child(索引值) 从父标签下所有标签开始计算 （2）父标签名[父标签属性名=属性值]>子标签名:nth-of-type(索引值) 表示父标签下具体标签的第几个标签3.需求 在页面中,使用css定位账号A输入框'''# 1.导入seleniumfrom selenium import webdriverfrom time import sleepimport os# 2.打开浏览器driver = webdriver.Chrome()# 3.打开注册A页面url = "file:///" + os.path.abspath("./练习页面/注册A.html")driver.get(url)# 4. 使用css索引定位账号A输入框textA_1 = driver.find_element_by_css_selector("fieldset>:nth-child(2)>input")textA_2 = driver.find_element_by_css_selector("fieldset>p:nth-of-type(1)>input")print(textA_1.get_attribute("outerHTML"))print(textA_2.get_attribute("outerHTML"))# 5.关闭浏览器sleep(2)driver.quit()'''输出结果：<input type="textA" name="userA" id="userA" placeholder="账号A" required="" value=""><input type="textA" name="userA" id="userA" placeholder="账号A" required="" value="">'''

5。通过逻辑运算定位元素

CSS选择器还可以实现逻辑运算，同时匹配两个属性。与XPath不同，这里不需要编写和关键字。

例如:

<input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">'''1.学习目标: 必须掌握selenium中css定位方法2.语法 2.1 在selenium中语法 (1)driver.find_element_by_css_selector("css选择器定位策略") (2)driver.find_elements_by_css_selector("css选择器定位策略") 2.2 css表达式写法 逻辑定位 格式：标签名[属性名1=属性值1][属性名2=属性值2]... 注意:属性与属性之间不能用空格3.需求 在页面中,使用css定位电话A输入框'''# 1.导入seleniumfrom selenium import webdriverfrom time import sleepimport os# 2.打开浏览器driver = webdriver.Chrome()# 3.打开注册A页面url = "file:///" + os.path.abspath("./练习页面/注册A.html")driver.get(url)# 4. 使用css逻辑定位---电话A输入框# 注意：两个属性之间不能加空格，空格表示层级关系telA = driver.find_element_by_css_selector("input[type='telA'][placeholder='电话A']")print(telA.get_attribute("outerHTML"))# 5.关闭浏览器sleep(2)driver.quit()'''输出结果：<input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">'''

6。通过模糊匹配定位元素

css_selector有三种模糊匹配方法。

到id属性值的头，比如ctrl_12

driver.find_element_by_css_selector("input[id^='ctrl']")

到id属性值的末尾，如a_ctrl

driver.find_element_by_css_selector("input[id$='ctrl']")

到id属性值的中间，如1_ctrl_12

driver.find_element_by_css_selector("input[id*='ctrl']")'''1.学习目标: 必须掌握selenium中css定位方法2.语法 2.1 在selenium中语法 (1)driver.find_element_by_css_selector("css选择器定位策略") (2)driver.find_elements_by_css_selector("css选择器定位策略") 2.2 css表达式写法 模糊匹配：匹配属性值 （1）* ：匹配所有 （2）^ ：匹配开头 （3）$ ：匹配结尾3.需求 在页面中,使用css定位注册用户A按钮'''# 1.导入seleniumfrom selenium import webdriverfrom time import sleepimport os# 2.打开浏览器driver = webdriver.Chrome()# 3.打开注册A页面url = "file:///" + os.path.abspath("./练习页面/注册A.html")driver.get(url)# 4. 使用css模糊匹配定位---注册用户A按钮button_1 = driver.find_element_by_css_selector("button[type^='su']")print(button_1.get_attribute("outerHTML"))button_2 = driver.find_element_by_css_selector("button[value$='册A']")print(button_2.get_attribute("outerHTML"))button_3 = driver.find_element_by_css_selector("button[title*='入会']")print(button_3.get_attribute("outerHTML"))# 5.关闭浏览器sleep(2)driver.quit()'''输出结果：<button type="submitA" value="注册A" title="加入会员A">注册用户A</button><button type="submitA" value="注册A" title="加入会员A">注册用户A</button><button type="submitA" value="注册A" title="加入会员A">注册用户A</button>'''