Webscraping og botudvikling · Lektion

CSS-selektorer til præcist dataudtræk

Anvend CSS-selektorer til at finde og udtrække data fra elementer baseret på deres typografier og attributter.

Lektion 2 af 412 trin

CSS-selektorer til præcist dataudtræk er en gratis Webscraping og botudvikling-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Webscraping og botudvikling, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Webscraping og botudvikling-kurset indeholder 4 lektioner i alt.

Hvad er CSS-selectors?

CSS-selectors er mønstre, der bruges til at vælge elementer på en webside. Tænk på dem som præcise instruktioner til at finde bestemte oplysninger.

Webbrowsere bruger dem til at anvende typografier (CSS), og vi bruger dem til at udtrække data effektivt.

Selectors til dataudtrækning

Ved web scraping giver CSS-selectors en effektiv måde at finde præcis de data, du har brug for, i kompleks HTML.

De er ofte mere kompakte end XPath.
Mange udviklere kender allerede CSS.
BeautifulSoup har fremragende understøttelse af dem.

Vælg efter tag-navn

Den enkleste selector er tag-navnet. Den vælger alle elementer af den pågældende type.

For eksempel vælger p alle afsnitstags, og a vælger alle anker- (link-)tags.

Eksempel: Hvis du vil finde alle listeelementer, skal du bruge li.

from bs4 import BeautifulSoup

html_doc = """
<html><body>
  <h1>My Title</h1>
  <p>First paragraph.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</body></html>
"""
soup = BeautifulSoup(html_doc, 'html.parser')

# Select all 'p' tags
paragraphs = soup.select('p')
for p in paragraphs:
    print(p.get_text())

Klasse- og ID-selectors

Du kan vælge elementer ud fra deres klasse- eller ID-attributter. De bruges meget ofte til typografi og entydig identifikation.

Klasse: Brug et punktum . før klassens navn (f.eks. .product-title).
ID: Brug et hash-tegn # før ID-navnet (f.eks. #main-content). ID'er skal være entydige!

from bs4 import BeautifulSoup

html_doc = """
<div id="header">Welcome</div>
<p class="intro">Hello there!</p>
<p class="intro">Another intro.</p>
"""
soup = BeautifulSoup(html_doc, 'html.parser')

header = soup.select_one('#header')
print("Header:", header.get_text())

intros = soup.select('.intro')
for p in intros:
    print("Intro:", p.get_text())

Valg af indlejrede elementer

Hvis du vil vælge elementer, der befinder sig inde i andre elementer, skal du bruge et mellemrum mellem vælgerne. Det kaldes en efterkommer-vælger.

Det betyder: "find et element (B), der befinder sig et vilkårligt sted inde i et andet element (A)".

Eksempel: div p vælger alle <p>-tags, der befinder sig i et vilkårligt <div>-tag.

from bs4 import BeautifulSoup

html_doc = """
<div>
  <p>Inside div paragraph 1</p>
  <span>
    <p>Inside span inside div</p>
  </span>
</div>
<p>Outside div paragraph</p>
"""
soup = BeautifulSoup(html_doc, 'html.parser')

div_paragraphs = soup.select('div p')
for p in div_paragraphs:
    print(p.get_text())

Kun direkte underordnede elementer

Nogle gange vil du kun have elementer, der er direkte underordnede elementer af et andet element, og ikke bare vilkårlige efterkommere.

Brug større-end-tegnet > til dette.

Eksempel: ul > li vælger alle <li>-tags, der er direkte underordnede af et <ul>-tag.

from bs4 import BeautifulSoup

html_doc = """
<div class="container">
  <p>Direct child P</p>
  <div>
    <p>Nested P (not direct)</p>
  </div>
</div>
"""
soup = BeautifulSoup(html_doc, 'html.parser')

direct_p = soup.select('.container > p')
for p in direct_p:
    print(p.get_text())

Valg efter attributter

Du kan vælge elementer ud fra deres attributter og endda deres attributværdier!

[attr]: Har attributten (f.eks. [href]).
[attr="value"]: Har attributten med den nøjagtige værdi (f.eks. [target="_blank"]).
[attr^="value"]: Attributværdien begynder med (f.eks. [src^="data:"]).
[attr$="value"]: Attributværdien slutter med (f.eks. [alt$="logo"]).
[attr*="value"]: Attributværdien indeholder (f.eks. [id*="item"]).

from bs4 import BeautifulSoup

html_doc = """
<a href="/about">About Us</a>
<a href="https://example.com/contact" target="_blank">Contact</a>
<img src="image.jpg" alt="product image">
"""
soup = BeautifulSoup(html_doc, 'html.parser')

# Select links with target="_blank"
external_links = soup.select('a[target="_blank"]')
for link in external_links:
    print("External:", link.get('href'))

# Select images with alt containing "image"
product_images = soup.select('img[alt*="image"]')
for img in product_images:
    print("Image:", img.get('src'))

Kombination med kommaer

Hvis du vil vælge elementer, der matcher en hvilken som helst af flere forskellige vælgere, kan du adskille dem med et komma ,.

Det er nyttigt, når du vil indsamle data fra forskellige typer elementer eller placeringer.

Eksempel: h1, h2, h3 vælger alle overskriftstags på niveau 1, 2 eller 3.

from bs4 import BeautifulSoup

html_doc = """
<h1>Main Heading</h1>
<p>Some text.</p>
<h2>Sub Heading</h2>
<div>Another div.</div>
"""
soup = BeautifulSoup(html_doc, 'html.parser')

headings = soup.select('h1, h2')
for h in headings:
    print(h.get_text())

Pseudo-klasser til placering

CSS-pseudo-klasser gør det muligt at vælge ud fra tilstand eller placering og ikke kun attributter. Ved scraping er de placeringsbaserede pseudo-klasser meget nyttige.

:first-child: Vælger det første underordnede element.
:last-child: Vælger det sidste underordnede element.
:nth-of-type(n): Vælger element nummer N af en bestemt type (f.eks. li:nth-of-type(2) for det andet listeelement).

from bs4 import BeautifulSoup

html_doc = """
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
"""
soup = BeautifulSoup(html_doc, 'html.parser')

first_item = soup.select_one('li:first-child')
print("First:", first_item.get_text())

second_item = soup.select_one('li:nth-of-type(2)')
print("Second:", second_item.get_text())

Praktisk brug af CSS-vælgere

Lad os samle det, vi har lært, for at udtrække specifikke data fra en eksempelvis produktliste.

Vi vil have titlen og prisen på det første produkt.

from bs4 import BeautifulSoup

html_doc = """
<div class="product-list">
  <div class="product-card">
    <h3 class="product-title">Laptop X1</h3>
    <p class="product-price">$999.99</p>
    <button class="add-to-cart">Add</button>
  </div>
  <div class="product-card">
    <h3 class="product-title">Mouse Z2</h3>
    <p class="product-price">$29.99</p>
    <button class="add-to-cart">Add</button>
  </div>
</div>
"""
soup = BeautifulSoup(html_doc, 'html.parser')

# Select the first product card
first_product = soup.select_one('.product-card:first-of-type')

if first_product:
    title = first_product.select_one('.product-title')
    price = first_product.select_one('.product-price')
    print("Title:", title.get_text())
    print("Price:", price.get_text())
else:
    print("No product found.")

Hurtigt tjek af vælgere

Hvilken CSS-vælger vil korrekt vælge teksten "Product Name 2" i den følgende HTML?

<div class="items">
  <div id="item-1">
    <span class="name">Product Name 1</span>
  </div>
  <div id="item-2">
    <span class="name">Product Name 2</span>
  </div>
  <p class="name">Other Name</p>
</div>

Besvar den i den interaktive lektion

Opsummering: CSS-vælgere

Godt gået! Du har lært det grundlæggende om CSS-vælgere til webscraping.

Vi har lært at vælge efter tag, klasse og ID.
Vi har udforsket efterkommer-vælgere (mellemrum) og vælgere for direkte underordnede elementer (>).
Du kan filtrere efter attributter ([attr="value"]) og bruge pseudo-klasser som :first-child.
BeautifulSoups .select()- og .select_one()-metoder gør det nemt at bruge dem i Python.

Nu ser vi nærmere på XPath for at få endnu mere effektive valg!

Gratis at komme i gang

Lær Python med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “CSS-selektorer til præcist dataudtræk” gratis?

Ja — alle 3 lektioner i læringssporet Webscraping og botudvikling, inklusive “CSS-selektorer til præcist dataudtræk”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Webscraping og botudvikling-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “CSS-selektorer til præcist dataudtræk”?

Anvend CSS-selektorer til at finde og udtrække data fra elementer baseret på deres typografier og attributter. Du øver dig i Webscraping og botudvikling med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Webscraping og botudvikling?

Der kræves ingen tidligere erfaring. Webscraping og botudvikling på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “CSS-selektorer til præcist dataudtræk”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Webscraping og botudvikling-lektion?

Ja. Alle Webscraping og botudvikling-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Webscraping og botudvikling