Селекторы CSS предоставляют мощный способ нацеливания и извлечения определенного контента из HTML-страниц. Это подробное руководство охватывает все, что вам нужно знать, чтобы использовать селекторы CSS для очистки веб-страниц в Python.
Введение в CSS-селекторы
Селекторы CSS позволяют выбирать элементы на веб-странице по идентификатору, классу, имени тега, атрибутам и т. д. Вот некоторые примеры:
div- Выбрать всеэлементы#container– Выберите элемент с id="container".item– Выберите элементы с помощью class="item"a[href^="http"]– Выберите теги привязки с href, начинающимся с http.
Доступно более 50 различных типов и комбинаций селекторов CSS. Сюда входят тег, идентификатор, класс, атрибут, псевдокласс, позиционные, состояния и лексические селекторы.
Некоторые ключевые типы селекторов включают в себя:
| Селектор | Пример | Описание |
|---|---|---|
| Тип | a | Выбирает все элементы данного типа тега |
| ID | #container | Выбирает элемент с определенным атрибутом id |
| Класс | .item | Выбирает элементы с определенным атрибутом класса |
| Атрибут | a[target] | Выберите элементы с определенным атрибутом |
| Псевдо-класс | a:hover | Выберите элементы в определенном состоянии |
Их можно комбинировать по-разному, чтобы очень точно нацеливать элементы. Например:
div.content table.data tr.highlight > td
Что распадается на:
div.content–<div>элементы с class="content"table.data–<table>элементы с class="data" внутри<div>tr.highlight–<tr>элементы с class="highlight" внутри<table>> td–<td>элементы, являющиеся прямыми дочерними элементами<tr>
Как видите, селекторы CSS позволяют детализировать и очень точно указывать элементы в иерархии HTML. Это делает их бесценными для извлечения конкретных данных с веб-страниц.
Исследования показывают, что идентификаторы и классы CSS используются более чем на 90% сайтов для обеспечения стилизации. Эта распространенность также делает их отличными инструментами для выбора контента для парсинга.
Использование селекторов CSS в Python
Популярные библиотеки Python, такие как BeautifulSoup и Parsel, имеют встроенную поддержку селекторов CSS:
КрасивыйСуп
Чтобы использовать селекторы CSS в BeautifulSoup, вызовите метод select() метод на BeautifulSoup объект:
from bs4 import BeautifulSoup
soup = BeautifulSoup(html)
links = soup.select(‘a‘) # All anchor tags
first_link = soup.select_one(‘a‘) # First anchor tagselect()возвращает список всех совпадающих элементов.select_one()возвращает только первое совпадение.
посылка
Библиотека Parsel предоставляет аналогичный API:
from parsel import Selector
selector = Selector(html)
links = selector.css(‘a‘).getall()
first_link = selector.css(‘a‘).get().css()выполняет селекторы CSS.getall()возвращает все совпадения.get()возвращает первое совпадение
Parsel используется внутри платформы Scrapy.
Сравнение библиотек
И BeautifulSoup, и Parsel имеют почти идентичную функциональность селектора CSS. Parsel немного быстрее в тестах, но BeautifulSoup предоставляет дополнительные функции, такие как поиск и изменение DOM.
Для большинства целей очистки их поддержка селекторов CSS взаимозаменяема.
Примеры CSS-селекторов
Теперь давайте рассмотрим несколько конкретных примеров использования селекторов CSS для очистки данных:
Получить элементы по имени тега
Выбрать все гиперссылки на странице:
links = soup.select(‘a‘)Это подойдет к любому <a> элементы тега привязки.
Выбрать элемент по идентификатору
Получить форму на странице с определенным идентификатором:
login_form = soup.select_one(‘#loginForm‘) Ассоциация # префикс указывает на соответствие атрибуту id. Это выберет элемент с id="loginForm".
Идентификаторы должны быть уникальными на странице, поэтому всегда будет возвращаться один элемент.
Получить элементы по имени класса
Выберите все элементы страницы с определенным классом:
products = soup.select(‘.product-item‘)Ассоциация . префикс обозначает селектор класса. Это выберет все элементы с class="product-item".
Обратите внимание, что классы можно использовать повторно, поэтому они могут соответствовать нескольким элементам.
Выбрать по значению атрибута
Извлеките поля ввода на основе их атрибута типа:
text_inputs = soup.select(‘input[type="text"]‘)Ассоциация [attribute="value"] синтаксис позволяет выполнять сопоставление по определенным значениям атрибутов.
Объединение нескольких селекторов
Выберите якоря внутри определенного div боковой панели:
sidebar_links = soup.select(‘div.sidebar a.highlight‘)Это будет соответствовать <a> элементы с class="highlight" внутри <div class="sidebar">.
Несколько селекторов можно объединить, разделив их пробелом, который выбирает элементы-потомки.
Очистка данных с помощью селекторов CSS
После извлечения элементов селекторы CSS можно использовать для очистки данных:
for product in soup.select(‘.product‘):
name = product.select_one(‘.product-name‘).text
price = product.select_one(‘.product-price‘).text
print(name, price)Это проходит через .product элементы и царапает .product-name и .product-price значения из каждого блока продуктов.
Преимущество селекторов CSS в том, что они позволяют изолировать нужные данные от окружающего HTML.
Пример парсинга – информационные окна Википедии
Например, рассмотрим очистку инфобоксы из Википедии:
url = ‘https://en.wikipedia.org/wiki/Abraham_Lincoln‘
soup = BeautifulSoup(requests.get(url).text)
infobox = soup.select_one(‘.infobox‘)
title = infobox.select_one(‘.fn‘).text
born = infobox.select_one(‘.bday‘).text
office = infobox.select_one(‘.label[style*=bold]‘).text
print(title) # Abraham Lincoln
print(born) # February 12, 1809
print(office) # 16th President of the United StatesЭто изолирует содержимое информационного окна, используя .infobox class, затем извлекает определенные поля, используя вложенные селекторы тегов, классов и атрибутов.
Как видите, объединение различных типов селекторов позволяет вам получить необходимые данные.
Извлечение данных из таблицы
Селекторы также могут помочь очистить табличные данные:
url = ‘https://www.example.com/data.html‘
soup = BeautifulSoup(requests.get(url).text)
table = soup.select_one(‘table.data-table‘)
headers = [h.text for h in table.select(‘th‘)]
rows = []
for row in table.select(‘tr‘):
cells = [d.text for d in row.select(‘td‘)]
rows.append(dict(zip(headers, cells)))
print(rows) При этом извлекается таблица данных, считываются метки заголовков, затем циклически перебираются строки и создается словарь из пар заголовок-ячейка.
Селекторы CSS позволяют легко очищать структурированные данные.
Ограничения CSS-селекторов для парсинга
Одним из недостатков селекторов CSS является то, что они могут анализировать только статический HTML и не работают с контентом, динамически загружаемым через JavaScript. Для парсинга современных сайтов требуются дополнительные инструменты, такие как Selenium или автоматизация браузера.
Они также предоставляют ограниченную возможность перемещения вверх и выбора родительских элементов. Таким образом, цепочка может детализировать иерархию только вниз, а не вверх.
Несмотря на это, селекторы CSS остаются важным инструментом для парсинга благодаря своей повсеместности, скорости и удобству извлечения данных.
Объединение селекторов CSS в цепочку
Цепочка позволяет детализировать элементы-потомки:
rows = soup.select(‘div#content table.data tr‘)
for row in rows:
name = row.select_one(‘td.name‘).text
price = row.select_one(‘td.price‘).text
print(name, price)Во-первых, все <tr> строки выбираются, затем конкретные <td> ячейки внутри каждой строки извлекаются путем объединения.
Комбинация селекторов в цепочку позволяет очищать данные относительно окружающей структуры и содержимого.
Расширенные селекторы CSS
Есть также некоторые более продвинутые возможности селектора CSS, о которых стоит рассказать:
Wildcards
Ассоциация * Селектор с подстановочными знаками соответствует любому элементу:
panels = soup.select(‘div.panel *‘) # All descendantsСелекторы атрибутов
Возможно более сложное сопоставление атрибутов:
input[type^="text"] # Type starts with "text"
a[href$=".pdf"] # Href ends with ".pdf"
div[class*="head"] # Class contains "head"Псевдоселекторы
Специальные селекторы состояний, такие как :hover, :visited и т. д. Например:
a:visited {color: purple}Поддержка варьируется в зависимости от парсера. Некоторые псевдоселекторы, такие как :contains() являются пользовательскими расширениями, а не CSS.
Одноуровневые селекторы
Цель на основе братьев и сестер, например, соседнего брата или сестры p + ul находит <ul> сразу после <p>.
отрицание
:not(selector) исключает совпадающие элементы.
Эти дополнительные переключатели обеспечивают еще более точный контроль очистки.
Парсинг интерактивных сайтов
Хотя селекторы CSS работают только со статическим HTML, существуют способы использовать их при очистке интерактивных страниц с содержимым, сгенерированным JavaScript:
Браузерная автоматизация
Такие инструменты, как Selenium, могут заставить браузер отображать JavaScript перед анализом с помощью селекторов CSS:
from selenium import webdriver
driver = webdriver.Chrome()
driver.get(url)
soup = BeautifulSoup(driver.page_source)
results = soup.select(‘#results .result‘)Это позволяет выбирать элементы после запуска JS.
Безголовый просмотр
Беспрепятственный парсинг, такие инструменты, как Puppeteer и Playwright, обеспечивают поддержку селектора CSS:
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
page.goto(url)
html = page.content()
soup = BeautifulSoup(html)Содержимое страницы после рендеринга JavaScript можно проанализировать.
Расширения браузера
Расширения браузера, такие как SelectorGadget, очищают селекторы CSS, анализируя сетевой трафик и DOM.
Эти подходы позволяют использовать селекторы CSS на динамических сайтах. Селекторы по-прежнему соответствуют только HTML, но генерируются динамически с помощью JavaScript.
Ограничения и проблемы
Хотя селекторы CSS повсеместно распространены и удобны, у них есть некоторые ограничения:
Парсинг сложных сайтов
Селекторы сталкиваются с некоторыми сложными структурами сайта:
- Фреймы и iframe требуют отдельного анализа.
- Для расширенных сеток и макетов могут потребоваться сложные селекторы.
- Интерактивные виджеты и встроенные приложения требуют альтернативных подходов.
Часто требуется сочетание выбора CSS и другой логики синтаксического анализа.
Проблемы с производительностью
Очень длинные и сложные селекторы могут работать медленно. Следует избегать вложенности более 3-4 уровней.
Рекомендуем делать отдельные селекторы простыми, состоящими не более чем из 3–4 компонентов. Объедините несколько простых селекторов вместо запутанных одиночных выражений.
Хрупкие селекторы
Таргетинг на основе таких атрибутов, как класс и идентификатор, приводит к хрупким селекторам, которые легко ломаются, если эти значения изменяются при редизайне сайта.
Там, где это возможно, выбирайте элементы на основе имени, положения и иерархии, а не хрупких атрибутов. Или объедините несколько селекторов в качестве резервных.
Ограничения на обход DOM
Селекторы CSS могут перемещаться только вниз по дереву потомков, но не до родительских элементов.
Выражения XPath обеспечивают более гибкий обход документа как вверх, так и вниз.
Поддержка псевдоселектора
Классические псевдоселекторы CSS, такие как :visited и :hover имеют ограниченную кроссбраузерную поддержку в парсерах. Пользовательские селекторы, такие как :contains() являются нестандартными.
Полагайтесь на простые псевдоклассы, такие как :first-child а не сложные псевдоселекторы.
Альтернативы селекторам CSS
Хотя селекторы CSS незаменимы, они не являются единственной игрой для анализа HTML:
XPath
XPath — это язык запросов для выбора узлов в документах XML/HTML, альтернативный CSS.
Плюсы:
- Более мощный обход структуры документа.
- Надежный стандарт, поддерживаемый W3C.
Минусы:
- Многословный и сложный синтаксис.
- Производительность может быть медленнее.
Regex
Регулярные выражения могут извлекать текстовые шаблоны:
Плюсы:
- Гибкое мощное сопоставление с образцом.
Минусы:
- Беспорядок при анализе вложенного HTML.
- Нет встроенной поддержки обхода.
На практике комбинация селекторов CSS, XPath и Regex часто обеспечивает наиболее надежные возможности для парсинга веб-страниц в промышленном масштабе.
Инструменты и библиотеки
Вот несколько важных инструментов для работы с селекторами CSS:
- СелекторГаджет – Расширение браузера для создания селекторов.
- Драматург – Безголовый парсер с поддержкой селектора CSS.
- Scrapy – Платформа парсинга веб-страниц с использованием селекторов Parsel и CSS.
- кукольник – Безголовая очистка хрома.
- КрасивыйСуп – Ведущий парсер Python HTML.
Они предоставляют все необходимое для использования селекторов CSS для парсинга веб-страниц.
Заключение
Селекторы CSS предоставляют универсальный и повсеместный механизм извлечения данных с веб-страниц. Распространенность идентификаторов и классов в HTML делает их идеальными для детализации и сбора только необходимого контента.
Овладение разнообразием типов селекторов и их объединение посредством цепочек и вложений позволяет добиться чрезвычайно точного таргетинга. Благодаря возможностям библиотек Python, таких как BeautifulSoup и Parsel, селекторы CSS являются важным методом для любого веб-парсера.
