Web Scraper 高級用法——CSS 選擇器的使用 | 簡易數據分析 15

這是簡易數據分析系列的第 15 篇文章。

年底事情比較忙，好久不更新了，後臺一直有讀者催更，我看了一些讀者給個人私信，發現一些通用的問題，因此單獨寫篇文章，介紹一些 Web Scraper 的進階用法。

今天咱們就來學習一些 CSS 選擇器的知識，輔助 Web Scraper 更好的定位要選擇的元素。

<br/>

1、定位 HTML 節點

HTML 是什麼？它是一個網頁的骨架，是最最基礎的東西。好比說你如今看的這篇文章，其實就是一個網頁，每一行字都是 HTML 裏的一個 <p> 標籤。

網頁就是由一行一行的 HTML 標籤壘起來的，因此咱們用 Web Scraper 的 Selector 選擇的元素，本質上都是 HTML 標籤，都是一個一個的 HTML 節點。

使用 Web Scraper 的 Selector 自動選擇元素時，有時候選的節點不許，抓不到數據，這時候就要咱們手動調節 Selector 生成的代碼。那麼第一個問題就來了，如何在網頁裏定位咱們須要的 HTML 節點？

咱們按 F12 打開網頁的調試面板時，調試面板左上角有個箭頭，咱們點擊一下，等箭頭變成藍色時，移動到咱們要抓取節點的位置，而後再點擊一下，就會自動定位這個 HTML 節點的位置。

下面請咱們的老朋友——豆瓣電影TOP250，來演示一下如何定位。好比說咱們想定位《肖申克的救贖》的電影名字，按照上面的步驟走一遍流程，動圖以下：

是否是很是的簡單？藉助這個小箭頭，咱們能夠很輕鬆的定位 HTML 節點。

<br/>

2、CSS 選擇器

CSS 是個什麼東西？先不要管它爲何叫 CSS，這不重要。咱們只要關注 CSS 是幹什麼的就好了。

有一個很是形象的比喻：HTML 是骨架，CSS 是衣服。若是世界上只有 HTML，那網頁就全是千篇一概的 word 文檔了，只有加上 CSS 的修飾，纔有如今絢麗多彩的網頁。

CSS 乾的活提及來也簡單，好比說改個字號大小啊，加個背景顏色啊，加些網頁特效啊，不過這些對於 Web Scraper 來講都不須要，由於 Web Scraper 是個爬蟲工具，關注點是數據，而不是設計。

CSS 裏用來裝飾的特性咱們是用不到的，可是 CSS 裏的選擇器咱們仍是用獲得的。Web Scraper 裏用來選擇元素的 Selector，背後依賴的的技術就是 CSS 選擇器。

CSS 選擇器，官方定義了 50 多種，可是通過個人實踐總結，Web Scraper 用的最多的只有 6 種，掌握這 6 種選擇器，就能夠解決 99% 的選擇問題。

爲了學習方便，我這裏建立了一個簡單的網頁，專門用於 CSS 選擇器的教學。

<div class="family">
  <p class="parent">父親👨</p>
  <p class="parent">母親👩</p>
  <p class="girl" dance>姐姐💃</p>
  <p class="boy" dance>哥哥🕺</p>
  <p class="boy">弟弟👶</p>
  <div>
    玩具櫃
    <span id="toy">一把 🔫</span>
  </div>
</div>

網頁結構很是簡單，用幾個標籤描述了一個五口之家：父親、母親、姐姐、哥哥和弟弟，還有一把玩具槍。咱們就經過這個網頁來學習 CSS 選擇器。

1.標籤選擇器

在這個家庭裏，若是我想把全部的家庭成員選中，觀察網頁結構，你會發現五我的都被 <p> 標籤包住了，因此咱們直接在 Selector 中輸入字符 p，就能夠選擇全部的家庭成員：

同理，若是咱們要選擇玩具槍，發現它被 <span> 標籤包裹着，咱們輸入 span，就能選擇玩具槍：

2.class 選擇器

咱們想選擇父母怎麼辦？觀察發現，父母的 <p> 標籤上，有着 class="parent" 這個屬性，咱們能夠利用 CSS 的 class 選擇器，因此咱們輸入 .parent（注意： parent 前面有個小數點「.」），表示選中全部的有着 class="parent" 屬性的標籤，在這個例子裏就能夠選中父母：

固然，你也能夠輸入 p.parent，表示選中全部的有着 class="parent" 屬性的 <p> 標籤，同樣能夠選中父母。

3.id 選擇器

若是你想選中玩具槍，除了前面直接輸入 span，咱們觀察能夠發現，span 上還有一個 id="toy" 屬性。咱們能夠利用 CSS 選擇器裏的 id 選擇器，能夠輸入 #toy（注意： toy 前面有個井號「#」），選中玩具槍：

4.屬性選擇器

HTML 是一個很是自由的文檔，除了官方提供的一些屬性，例如 class 和 id，咱們還能夠加一些自定義的屬性。

好比說姐姐和哥哥，兩我的都在跳舞，觀察法相兩我的的 <p> 標籤上都加入了 dance 屬性，因此咱們能夠經過輸入 p[dance]，經過屬性選擇這兩我的：

其實前面的 class 選擇器和 id 選擇器，還能夠寫成 p[class=parent]，span[id=toy]，道理都是同樣的。

5.後代元素選擇器

HTML 是一個能夠互相嵌套的文檔結構，咱們能夠先肯定父元素的位置，而後再在父元素裏定位子元素。

舉一個簡單的例子，在前面定位玩具槍時，咱們能夠經過 id 選擇器定位，也能夠經過 span 元素定位，若是咱們想經過父元素來定位該怎麼作呢？

這時候後代元素選擇器就該出場了。咱們先經過 div.family 選擇父元素，而後經過 div.family span 選擇玩具槍（注意：div.family 和 span 中間的空格不能丟）：

同理，div.family div span，div.family span#toy 均可以選中玩具槍。

6.直接指定子元素位置

:nth-of-type(n) 是一個很是有用的元素選擇器，咱們能夠經過它直接指定元素。

好比說咱們想選擇弟弟，你會發現以前介紹的 5 種方法，都沒辦法直接選中他。這時候用 :nth-of-type(n) 就很是的簡單了：弟弟是全部 p 標籤的第 5 個元素，因此用 p:nth-of-type(5) 就能夠直接選中。

<br/> # 3、實戰

上文的知識密度仍是有些大的，熟練使用仍是須要一些刻意練習。咱們此次就用多種姿式選擇豆瓣電影的評分。

首先咱們可使用 class 選擇器。輸入 span.rating_num，選擇評分：

而後咱們能夠試試屬性選擇器，定位 property="v:average" 這個自定義屬性。輸入 span[property='v:average']，選擇評分：

咱們還能夠利用後代元素選擇器定位子元素，而後直接指定子元素位置。輸入 div.star span:nth-of-type(2) ，選擇評分：

這個只是一次小小的實戰練習，若是要較好的掌握，還須要多加練習。有時間的話還能夠去

https://www.runoob.com/cssref/css-selectors.html

這個網頁看看本文沒有介紹的其餘 CSS 選擇器，說不定就在項目中用到了。

<br/>

4、推薦閱讀

瀏覽器中那些鮮爲人知的使用技巧 | 簡易數據分析 03

菜鳥教程：HTML 教程

菜鳥教程：CSS 選擇器

<br/>

5.聯繫我

由於文章發在各大平臺上，帳號較多不能及時回覆評論和私信，有問題可關注公衆號 ——「鹵代烴實驗室」，關注上車防失聯。

原文出處：https://www.cnblogs.com/web-scraper/p/web-scraper-css.html