Введение

Селекторы CSS — это шаблон для выбора элементов HTML. Это позволяет нам выбирать на основе имени тега элемента, имени класса, идентификатора, атрибутов и других атрибутов. Синтаксис селекторов CSS прост и гибок, и это часто используемый способ поиска элементов при разработке интерфейса.

CSS-позиционирование в селене,Фактически, конкретные элементы находятся через cssselector.,cssселекторотсинтаксис CSS。CSSПозиционирование имеет следующие существенные преимущества：

1. Краткий синтаксис
2. По сравнению с другими методами позиционирования эффективность позиционирования выше.
3. По сравнению с другими методами позиционирования позиционирование более стабильное.

синтаксис селектора CSS

Базовый селектор

Примечание. Некоторые атрибуты элементов имеют несколько значений (например, атрибуты класса). При их использовании значения разделяются пробелами.

Селектор комбинации

Селектор Решение состоит в том, чтобы использовать несколько Базовых одновременно селектор для лучшей фильтрации целевых элементов

Селектор псевдоатрибутов

Селектор псевдоатрибутовотносится кэлементсуществоватьhtmlЭтого свойства на самом деле не существует в,Является ли атрибут расширенного описания определенным CSS

Пример использования

1. проходитьidселектор Находить

проходитьcssпозицияизid属性Находить百度首页из Поле вводаэлемент,код следующий:

from selenium import webdriver
from selenium.webdriver.common.by import By


 
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #Открыть веб-страницу
driver.maximize_window()
 
element = driver.find_element(By.CSS_SELECTOR, '#kw')
print(element)

1. проходитьclassселектор Находить

проходитьэлементиз.class属性值Находитьэлемент,В качестве примера возьмем поле ввода на домашней странице Baidu.,код следующий:

from selenium import webdriver
from selenium.webdriver.common.by import By


 
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #Открыть веб-страницу
driver.maximize_window()
 
element = driver.find_element(By.CSS_SELECTOR, '.s_ipt')
print(element)

1. Таргетинг по ярлыку

Давайте продолжим использовать поле ввода на домашней странице Baidu в качестве примера.,Поле ввода обычно имеетinputЭтикетка,код следующий:

from selenium import webdriver
from selenium.webdriver.common.by import By


 
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #Открыть веб-страницу
driver.maximize_window()
 
element = driver.find_element(By.CSS_SELECTOR, 'input')
print(element)

1. Селектор иерархии

отец по элементу и сынотношениевыбирать,Пример: прямая иерархическая связь дочернего элемента,использовать>Число,Продолжайте использовать окно поиска на главной странице Baidu в качестве примера.,код следующий:

from selenium import webdriver
from selenium.webdriver.common.by import By


 
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #Открыть веб-страницу
driver.maximize_window()
 
element = driver.find_element(By.CSS_SELECTOR, '.bg.s_ipt_wr > input')
print(element)

Примечание. Если связь между двумя элементами не является прямой связью подэлемента,Нам нужно использовать пробелы для разделения,Когда существует несколько уровней иерархических отношений,мы можемиспользоватьduoge>символ Число,Пример следующий:

from selenium import webdriver
from selenium.webdriver.common.by import By


 
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #Открыть веб-страницу
driver.maximize_window()
 
element = driver.find_element(By.CSS_SELECTOR, 'form input')
print(element)

------------------------------------

from selenium import webdriver
from selenium.webdriver.common.by import By


 
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #Открыть веб-страницу
driver.maximize_window()
 
element = driver.find_element(By.CSS_SELECTOR, 'form > span > input')
print(element)

Подвести итог

Позиционирование CSS — очень эффективный метод позиционирования, а его код очень краток. По сравнению с методом позиционирования xpath его скорость позиционирования высока. Если можно использовать позиционирование CSS, для позиционирования элемента рекомендуется использовать позиционирование CSS. Я надеюсь, что эта статья поможет каждому!