CSS-valitsimet tarkkaan poimintaan
Soveltakaa CSS-valitsimia tietojen täsmälliseen paikantamiseen ja poimimiseen elementeistä niiden tyylien ja attribuuttien perusteella.
CSS-valitsimet tarkkaan poimintaan on ilmainen Verkkosivujen kaavinta ja botit-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Verkkosivujen kaavinta ja botit-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Verkkosivujen kaavinta ja botit-kurssilla on yhteensä 4 oppituntia.
Mitä CSS-valitsimet ovat
CSS-valitsimet ovat kaavoja, joiden avulla verkkosivun elementtejä valitaan. Ajatelkaa niitä tarkkoina ohjeina tiettyjen tietojen löytämiseen.
Verkkoselaimet käyttävät niitä tyylien (CSS) soveltamiseen, ja me käytämme niitä tietojen poimimiseen tehokkaasti.
Valitsimet tietojen poimintaan
Verkkotiedon louhinnassa CSS-valitsimet tarjoavat tehokkaan tavan kohdistaa haku täsmälleen tarvitsemiinne tietoihin monimutkaisesta HTML-koodista.
- Ne ovat usein tiiviimpiä kuin XPath.
- Monet kehittäjät tuntevat CSS:n jo ennestään.
- BeautifulSoup tukee niitä erinomaisesti.
Valitseminen tunnisteen nimen perusteella
Yksinkertaisin valitsin on tunnisteen nimi. Se valitsee kaikki kyseistä tyyppiä olevat elementit.
Esimerkiksi p valitsee kaikki kappaletunnisteet ja a kaikki ankkuri- eli linkkitunnisteet.
Esimerkki: Kaikki luettelokohdat voi etsiä käyttämällä valitsinta 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())
Luokka- ja ID-valitsimet
Voitte valita elementtejä niiden class- tai ID-attribuuttien perusteella. Näitä käytetään hyvin yleisesti tyylittelyyn ja yksilölliseen tunnistamiseen.
- Class: Käyttäkää luokan nimen edessä pistettä
.(esimerkiksi.product-title). - ID: Käyttäkää ID-nimen edessä risuaitaa
#(esimerkiksi#main-content). ID-tunnisteiden tulee olla yksilöllisiä!
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())
Sisäkkäisten elementtien valitseminen
Voitte valita muiden elementtien sisällä olevia elementtejä käyttämällä valitsinten välissä välilyöntiä. Tätä kutsutaan jälkeläisvalitsimeksi.
Se tarkoittaa: "etsi elementti (B), joka on missä tahansa toisen elementin (A) sisällä".
Esimerkki: div p valitsee kaikki <p>-tunnisteet, jotka ovat jonkin <div>-tunnisteen sisällä.
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())
Vain suorat lapset
Joskus haluatte vain toisen elementin suorat lapset, etteivät kaikki sen jälkeläiset.
Käyttäkää tähän suurempi kuin -symbolia >.
Esimerkki: ul > li valitsee kaikki <li>-tunnisteet, jotka ovat <ul>-tunnisteen suoria lapsia.
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())
Valitseminen attribuuttien perusteella
Voitte valita elementtejä niiden attribuuttien ja jopa attribuuttien arvojen perusteella!
[attr]: Elementillä on attribuutti (esimerkiksi[href]).[attr="value"]: Attribuutilla on täsmälleen annettu arvo (esimerkiksi[target="_blank"]).[attr^="value"]: Attribuutin arvo alkaa annetulla merkkijonolla (esimerkiksi[src^="data:"]).[attr$="value"]: Attribuutin arvo päättyy annettuun merkkijonoon (esimerkiksi[alt$="logo"]).[attr*="value"]: Attribuutin arvo sisältää annetun merkkijonon (esimerkiksi[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'))
Yhdistäminen pilkuilla
Jos haluatte valita elementtejä, jotka vastaavat mikä tahansa useista eri valitsimista, voitte erottaa valitsimet pilkulla ,.
Tämä on hyödyllistä, kun haluatte kerätä tietoja erityyppisistä elementeistä tai eri kohdista.
Esimerkki: h1, h2, h3 valitsee kaikki tason 1, 2 tai 3 otsikkotunnisteet.
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())
Sijaintiin perustuvat pseudoluokat
CSS-pseudoluokkien avulla voidaan valita elementtejä tilan tai sijainnin, ei pelkästään attribuuttien perusteella. Verkkosivujen tietojen poiminnassa sijaintiin perustuvat pseudoluokat ovat erittäin hyödyllisiä.
:first-child: Valitsee ensimmäisen lapsielementin.:last-child: Valitsee viimeisen lapsielementin.:nth-of-type(n): Valitsee tietyn tyypin N:nnen elementin (esimerkiksili:nth-of-type(2)valitsee toisen luettelokohdan).
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())
CSS-valitsinten käytäntö
Yhdistetään opitut asiat ja poimitaan tiettyjä tietoja esimerkkituoteluettelosta.
Haluamme ensimmäisen tuotteen nimen ja hinnan.
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.")
Valitsinten pikatarkistus
Kun käytössä on alla oleva HTML, mikä CSS-valitsin valitsisi oikein tekstin "Product Name 2"?
<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>Kertaus: CSS-valitsimet
Hienoa työtä! Olette oppineet verkkosivujen tietojen poiminnassa käytettävien CSS-valitsinten perusteet.
- Opitte valitsemaan elementtejä tunnisteen, luokan ja ID:n perusteella.
- Tutustuimme jälkeläis- (välilyönti) ja suoran lapsen (
>) valitsimiin. - Voitte suodattaa attribuuttien (
[attr="value"]) perusteella ja käyttää esimerkiksi pseudoluokkaa:first-child. - BeautifulSoupin
.select()- ja.select_one()-metodit helpottavat niiden käyttöä Pythonissa.
Seuraavaksi tutustumme XPathiin, joka mahdollistaa vielä tehokkaamman valitsemisen!
Opi Python tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 12
- Oppitunnit
- 48
Usein kysytyt kysymykset
Onko oppitunti ”CSS-valitsimet tarkkaan poimintaan” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Verkkosivujen kaavinta ja botit-oppimispolun 3 oppituntia, myös oppitunnin “CSS-valitsimet tarkkaan poimintaan”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Verkkosivujen kaavinta ja botit-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”CSS-valitsimet tarkkaan poimintaan”?
Soveltakaa CSS-valitsimia tietojen täsmälliseen paikantamiseen ja poimimiseen elementeistä niiden tyylien ja attribuuttien perusteella. Harjoittelet Verkkosivujen kaavinta ja botit-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Verkkosivujen kaavinta ja botit-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Verkkosivujen kaavinta ja botit-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”CSS-valitsimet tarkkaan poimintaan”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Verkkosivujen kaavinta ja botit-oppitunnilla?
Kyllä. Jokainen Verkkosivujen kaavinta ja botit-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Monimutkaisten HTML-rakenteiden käsittely
- CSS-valitsimet tarkkaan poimintaan
- XPath vankkaan valintaan
- Datan poimiminen HTML-taulukoista