CSS-Selektoren bieten eine leistungsstarke Möglichkeit, bestimmte Inhalte gezielt aus HTML-Seiten zu extrahieren. Dieser ausführliche Leitfaden deckt alles ab, was Sie wissen müssen, um CSS-Selektoren für Web Scraping in Python zu nutzen.
Einführung in CSS-Selektoren
Mit CSS-Selektoren können Sie Elemente auf einer Webseite basierend auf ID, Klasse, Tag-Name, Attributen und mehr auswählen. Hier sind einige Beispiele:
div- Wählen Sie AlleElemente#container– Element mit id="container" auswählen.item– Elemente mit class="item" auswählena[href^="http"]– Wählen Sie Ankertags mit href aus, die mit http beginnen
Es stehen über 50 verschiedene CSS-Selektortypen und -Kombinationen zur Verfügung. Dazu gehören Tag-, ID-, Klassen-, Attribut-, Pseudoklassen-, Positions-, Zustands- und lexikalische Selektoren.
Zu den Schlüsselauswahltypen gehören:
| Wähler | Beispiel | Beschreibung |
|---|---|---|
| Typ | a | Wählt alle Elemente des angegebenen Tag-Typs aus |
| ID | #container | Wählt ein Element mit einem bestimmten ID-Attribut aus |
| Klasse | .item | Wählt Elemente mit einem bestimmten Klassenattribut aus |
| Attribut | a[target] | Wählen Sie Elemente mit bestimmten Attributen aus |
| Pseudoklasse | a:hover | Wählen Sie Elemente in einem bestimmten Zustand aus |
Diese können auf unterschiedliche Weise kombiniert werden, um Elemente sehr gezielt anzusprechen. Zum Beispiel:
div.content table.data tr.highlight > td
Was sich wie folgt zusammensetzt:
div.content-<div>Elemente mit class="content"table.data-<table>Elemente mit class="data" innerhalb der<div>tr.highlight-<tr>Elemente mit class="highlight" innerhalb der<table>> td-<td>Elemente, die direkte Kinder von sind<tr>
Wie Sie sehen, können Sie mit CSS-Selektoren einen Drilldown durchführen und Elemente in der HTML-Hierarchie sehr präzise angeben. Dies macht sie für die Extraktion spezifischer Daten aus Webseiten von unschätzbarem Wert.
Studien zeigen, dass CSS-IDs und -Klassen auf über 90 % der Websites verwendet werden, um das Styling zu ermöglichen. Aufgrund dieser Verbreitung eignen sie sich auch hervorragend für die Auswahl von Inhalten zum Scrapen.
Verwenden von CSS-Selektoren in Python
Beliebte Python-Bibliotheken wie BeautifulSoup und Parsel verfügen über integrierte Unterstützung für CSS-Selektoren:
BeautifulSuppe
Um CSS-Selektoren in BeautifulSoup zu verwenden, rufen Sie die auf select() Methode auf einem BeautifulSoup Objekt:
from bs4 import BeautifulSoup
soup = BeautifulSoup(html)
links = soup.select(‘a‘) # All anchor tags
first_link = soup.select_one(‘a‘) # First anchor tagselect()gibt eine Liste aller übereinstimmenden Elemente zurück.select_one()gibt nur die erste Übereinstimmung zurück.
Paket
Die Parsel-Bibliothek bietet eine ähnliche API:
from parsel import Selector
selector = Selector(html)
links = selector.css(‘a‘).getall()
first_link = selector.css(‘a‘).get().css()führt die CSS-Selektoren aus.getall()gibt alle Übereinstimmungen zurück.get()gibt die erste Übereinstimmung zurück
Parsel wird intern vom Scrapy-Web-Scraping-Framework verwendet.
Vergleich von Bibliotheken
Sowohl BeautifulSoup als auch Parsel verfügen über nahezu identische CSS-Selektorfunktionen. Parsel ist in Benchmarks etwas schneller, aber BeautifulSoup bietet zusätzliche Funktionen wie das Durchsuchen und Ändern des DOM.
Für die meisten Scraping-Zwecke ist die CSS-Selektorunterstützung austauschbar.
Beispiele für CSS-Selektoren
Sehen wir uns nun einige konkrete Beispiele für die Verwendung von CSS-Selektoren zum Scrapen von Daten an:
Elemente nach Tag-Namen abrufen
Wählen Sie alle Hyperlinks auf einer Seite aus:
links = soup.select(‘a‘)Das passt zu jedem <a> Anker-Tag-Elemente.
Wählen Sie Element nach ID aus
Holen Sie sich ein Formular auf einer Seite mit einer bestimmten ID:
login_form = soup.select_one(‘#loginForm‘) Das # Das Präfix gibt an, dass es mit dem ID-Attribut übereinstimmt. Dadurch wird das Element mit ausgewählt id="loginForm".
IDs müssen innerhalb einer Seite eindeutig sein, sodass immer ein Element zurückgegeben wird.
Elemente nach Klassennamen abrufen
Wählen Sie alle Seitenelemente mit einer bestimmten Klasse aus:
products = soup.select(‘.product-item‘)Das . Das Präfix bezeichnet einen Klassenselektor. Dadurch werden alle Elemente mit ausgewählt class="product-item".
Beachten Sie, dass Klassen wiederverwendet werden können, sodass möglicherweise mehrere Elemente übereinstimmen.
Nach Attributwert auswählen
Extrahieren Sie Eingabefelder basierend auf ihrem Typattribut:
text_inputs = soup.select(‘input[type="text"]‘)Das [attribute="value"] Mit der Syntax können Sie einen Abgleich nach bestimmten Attributwerten durchführen.
Kombinieren Sie mehrere Selektoren
Wählen Sie Anker innerhalb eines bestimmten Seitenleisten-Div aus:
sidebar_links = soup.select(‘div.sidebar a.highlight‘)Das wird passen <a> Elemente mit class="highlight" innerhalb <div class="sidebar">.
Mehrere Selektoren können kombiniert werden, indem sie durch ein Leerzeichen getrennt werden, das untergeordnete Elemente auswählt.
Scraping von Daten mit CSS-Selektoren
Sobald Sie Elemente extrahiert haben, können CSS-Selektoren zum Scrapen von Daten verwendet werden:
for product in soup.select(‘.product‘):
name = product.select_one(‘.product-name‘).text
price = product.select_one(‘.product-price‘).text
print(name, price)Dies wird durchgeschleift .product Elemente und kratzt die .product-name und .product-price Werte aus jedem Produktblock.
Der Vorteil von CSS-Selektoren besteht darin, dass Sie die gewünschten Daten vom umgebenden HTML isolieren können.
Scraping-Beispiel – Wikipedia-Infoboxen
Denken Sie zum Beispiel an das Schaben Infoboxen aus Wikipedia:
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 StatesDadurch wird der Inhalt der Infobox isoliert .infobox Klasse und extrahiert dann bestimmte Felder mithilfe verschachtelter Tag-, Klassen- und Attributselektoren.
Wie Sie sehen, können Sie durch die Verkettung verschiedener Selektortypen genau auf die benötigten Daten zugreifen.
Scraping von Daten aus einer Tabelle
Selektoren können auch beim Scrapen tabellarischer Daten helfen:
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) Dies extrahiert eine Datentabelle, liest die Header-Beschriftungen, durchläuft dann die Zeilen und erstellt ein Wörterbuch aus den Header-Zellen-Paaren.
CSS-Selektoren ermöglichen das einfache Scrapen strukturierter Daten.
Einschränkungen von CSS-Selektoren für Scraping
Ein Nachteil von CSS-Selektoren besteht darin, dass sie nur statisches HTML analysieren können und nicht mit Inhalten funktionieren, die dynamisch über JavaScript geladen werden. Das Scrapen moderner Websites erfordert zusätzliche Tools wie Selenium oder Browser-Automatisierung.
Sie bieten außerdem nur begrenzte Möglichkeiten zum Durchqueren und Auswählen übergeordneter Elemente. Die Verkettung kann also nur einen Drilldown einer Hierarchie ermöglichen, nicht einen Drilldown nach oben.
Dennoch bleiben CSS-Selektoren aufgrund ihrer Allgegenwärtigkeit, Geschwindigkeit und Bequemlichkeit bei der Datenextraktion ein unverzichtbares Werkzeug für das Scraping.
Verketten von CSS-Selektoren
Die Verkettung ermöglicht einen Drilldown durch untergeordnete Elemente:
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)Zuerst alle <tr> Zeilen werden ausgewählt, dann spezifisch <td> Zellen aus jeder Zeile werden durch Verkettung extrahiert.
Durch die Verkettung von Selektoren in Kombination können Daten in Bezug auf die umgebende Struktur und den umgebenden Inhalt ausgewertet werden.
Erweiterte CSS-Selektoren
Es gibt auch einige erweiterte CSS-Auswahlfunktionen, die es wert sind, behandelt zu werden:
Wildcards
Das * Der Wildcard-Selektor stimmt mit jedem Element überein:
panels = soup.select(‘div.panel *‘) # All descendantsAttributselektoren
Ein komplexerer Attributabgleich ist möglich:
input[type^="text"] # Type starts with "text"
a[href$=".pdf"] # Href ends with ".pdf"
div[class*="head"] # Class contains "head"Pseudoselektoren
Spezielle Zustandsselektoren wie :hover, :visited usw. Zum Beispiel:
a:visited {color: purple}Die Unterstützung variiert je nach Parser. Einige Pseudoselektoren mögen :contains() sind benutzerdefinierte Erweiterungen und nicht CSS.
Geschwisterselektoren
Ziel basierend auf Geschwistern, z. B. benachbarten Geschwistern p + ul findet <ul> gleich nach <p>.
die Negierung
:not(selector) schließt übereinstimmende Elemente aus.
Diese zusätzlichen Wahlschalter ermöglichen eine noch präzisere Steuerung des Schabens.
Scraping interaktiver Websites
Während CSS-Selektoren nur bei statischem HTML funktionieren, gibt es Möglichkeiten, sie beim Scrapen interaktiver Seiten mit JavaScript-generiertem Inhalt zu verwenden:
Browser-Automatisierung
Tools wie Selenium können einen Browser dazu bringen, JavaScript zu rendern, bevor er mit CSS-Selektoren analysiert wird:
from selenium import webdriver
driver = webdriver.Chrome()
driver.get(url)
soup = BeautifulSoup(driver.page_source)
results = soup.select(‘#results .result‘)Dies ermöglicht die Auswahl von Elementen nach der Ausführung von JS.
Kopfloses Surfen
Für Headless Scraping bieten Tools wie Puppeteer und Playwright Unterstützung für CSS-Selektoren:
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)Der Seiteninhalt kann nach dem JavaScript-Rendering analysiert werden.
Browsererweiterungen
Browsererweiterungen wie SelectorGadget entfernen CSS-Selektoren, indem sie den Netzwerkverkehr und das DOM analysieren.
Diese Ansätze ermöglichen die Verwendung von CSS-Selektoren auf dynamischen Websites. Die Selektoren entsprechen immer noch nur HTML, werden aber dynamisch über JavaScript generiert.
Einschränkungen & Herausforderungen
Obwohl CSS-Selektoren allgegenwärtig und praktisch sind, weisen sie einige Einschränkungen auf:
Komplexe Websites durchsuchen
Selektoren haben mit einigen komplexen Site-Strukturen zu kämpfen:
- Frames und Iframes erfordern eine separate Analyse.
- Erweiterte Raster und Layouts erfordern möglicherweise komplexe Selektoren.
- Interaktive Widgets und eingebettete Apps erfordern alternative Ansätze.
Oft ist eine Mischung aus CSS-Auswahl und anderer Parsing-Logik erforderlich.
Leistungsprobleme
Sehr lange und komplexe Selektoren können langsam werden. Eine Verschachtelung mit einer Tiefe von mehr als 3-4 Ebenen sollte vermieden werden.
Wir empfehlen, die einzelnen Selektoren einfach zu halten und nicht mehr als 3–4 Komponenten zu enthalten. Verketten Sie mehrere einfache Selektoren anstelle komplizierter einzelner Ausdrücke.
Sprödselektoren
Targeting basierend auf Attributen wie Klasse und ID führt zu fragilen Selektoren, die leicht kaputt gehen, wenn sich diese Werte bei der Neugestaltung der Website ändern.
Wenn möglich, zielen Sie auf Elemente basierend auf Name, Position und Hierarchie ab und nicht auf fragile Attribute. Oder kombinieren Sie mehrere Selektoren als Backups.
DOM-Durchquerungsgrenzen
CSS-Selektoren können nur den Nachkommenbaum nach unten durchqueren, nicht bis zu den übergeordneten Elementen.
XPath-Ausdrücke ermöglichen eine flexiblere Durchquerung eines Dokuments nach oben und unten.
Pseudo-Selektor-Unterstützung
Klassische CSS-Pseudoselektoren wie :visited und :hover haben begrenzte browserübergreifende Unterstützung in Parsern. Benutzerdefinierte Selektoren wie :contains() sind nicht standardisiert.
Verlassen Sie sich auf einfache Pseudoklassen wie :first-child statt komplexer Pseudoselektoren.
Alternativen zu CSS-Selektoren
CSS-Selektoren sind zwar unverzichtbar, aber nicht das einzige Spiel zum Parsen von HTML:
XPath
XPath ist eine Abfragesprache zur Auswahl von Knoten in XML-/HTML-Dokumenten und bietet eine Alternative zu CSS.
Vorteile:
- Leistungsstärkere Durchquerung der Dokumentstruktur.
- Robuster Standard, der vom W3C gepflegt wird.
Nachteile:
- Ausführliche und komplexe Syntax.
- Die Leistung kann langsamer sein.
regulärer Ausdruck
Reguläre Ausdrücke können Textmuster extrahieren:
Vorteile:
- Flexibler, leistungsstarker Mustervergleich.
Nachteile:
- Chaotisch beim Parsen von verschachteltem HTML.
- Keine integrierte Unterstützung für Traversal.
In der Praxis bietet eine Kombination aus CSS-Selektoren, XPath und Regex häufig die robustesten Funktionen für Web-Scraping im industriellen Maßstab.
Werkzeuge & Bibliotheken
Hier sind einige wichtige Tools für die Arbeit mit CSS-Selektoren:
- SelektorGadget – Browsererweiterung zum Generieren von Selektoren.
- Dramatiker – Kopfloser Scraper mit CSS-Selektor-Unterstützung.
- Scrapy – Web-Scraping-Framework mit Parsel- und CSS-Selektoren.
- Puppenspieler – Kopfloses Chrome-Scraping.
- BeautifulSuppe – Führender Python-HTML-Parser.
Diese bieten alles, was Sie benötigen, um CSS-Selektoren für das Web-Scraping in der Produktion zu nutzen.
Zusammenfassung
CSS-Selektoren bieten einen vielseitigen und allgegenwärtigen Mechanismus zum Extrahieren von Daten aus Webseiten. Da IDs und Klassen in HTML weit verbreitet sind, eignen sie sich hervorragend zum Drilldown, um genau den Inhalt herauszusuchen, den Sie benötigen.
Die Beherrschung der Vielfalt der Selektortypen und deren Kombination durch Verkettung und Verschachtelung ermöglicht ein äußerst präzises Targeting. Dank der Leistungsfähigkeit von Python-Bibliotheken wie BeautifulSoup und Parsel sind CSS-Selektoren eine unverzichtbare Technik für jeden Web-Scraper.
