Bộ định vị CSS

Web Scraping với Python

Thomas Laetsch

Data Scientist, NYU

Đá Rosetta cho CSS

Thay / bằng > (trừ ký tự đầu)
- XPath: /html/body/div
- CSS Locator: html > body > div
Thay // bằng khoảng trắng (trừ ký tự đầu)
- XPath: //div/span//p
- CSS Locator: div > span p
Thay [N] bằng :nth-of-type(N)
- XPath: //div/p[2]
- CSS Locator: div > p:nth-of-type(2)

Đá Rosetta cho CSS

XPATH

xpath = '/html/body//div/p[2]'

CSS

css = 'html > body div > p:nth-of-type(2)'

Thuộc tính trong CSS

Tìm theo class: dùng dấu chấm .
- Ví dụ: p.class-1 chọn mọi thẻ p thuộc class-1

Tìm theo id: dùng dấu thăng #
- Ví dụ: div#uid chọn thẻ div có id bằng uid

Thuộc tính trong CSS

Chọn thẻ p trong class class1:

css_locator = 'div#uid > p.class1'

Chọn mọi phần tử có class thuộc class1:

css_locator = '.class1'

Trạng thái lớp

css = '.class1'

Chỉ class - CSS

Trạng thái lớp

xpath = '//*[@class="class1"]'

Chọn lớp - XPath - bằng nhau

Trạng thái lớp

xpath = '//*[contains(@class,"class1")]'

Chọn lớp - XPath - contains

Bộ chọn với CSS

from scrapy import Selector 

html = '''
<html>
  <body>
    <div class="hello datacamp">
      <p>Hello World!</p>
    </div>
    <p>Enjoy DataCamp!</p>
  </body>
</html>
''' 
sel = Selector( text = html )

>>> sel.css("div > p")
out: [<Selector xpath='...' data='<p>Hello World!</p>'>] 

>>> sel.css("div > p").extract()
out: [ '<p>Hello World!</p>' ]

Hẹn gặp lại (C)SS!

Web Scraping với Python