這是簡易數據分析系列的第 15 篇文章。
年末事情比較忙，很久不更新了，后台一直有讀者催更，我看了一些讀者給我的私信，發現一些通用的問題，所以單獨寫篇文章，介紹一些 Web Scraper 的進階用法。
今天我們就來學習一些 CSS 選擇器的知識，輔助 Web Scraper 更好的定位要選擇的元素。
一、定位 HTML 節點
HTML 是什么？它是一個網頁的骨架，是最最基礎的東西。比如說你現在看的這篇文章，其實就是一個網頁，每一行字都是 HTML 里的一個 <p> 標簽。
網頁就是由一行一行的 HTML 標簽壘起來的，所以我們用 Web Scraper 的 Selector 選擇的元素，本質上都是 HTML 標簽，都是一個一個的 HTML 節點。
使用 Web Scraper 的 Selector 自動選擇元素時，有時候選的節點不准，抓不到數據，這時候就要我們手動調節 Selector 生成的代碼。那么第一個問題就來了，如何在網頁里定位我們需要的 HTML 節點？
我們按 F12 打開網頁的調試面板時，調試面板左上角有個箭頭，我們點擊一下，等箭頭變成藍色時，移動到我們要抓取節點的位置，然后再點擊一下，就會自動定位這個 HTML 節點的位置。
下面請我們的老朋友——豆瓣電影TOP250，來演示一下如何定位。比如說我們想定位《肖申克的救贖》的電影名字，按照上面的步驟走一遍流程，動圖如下：
是不是非常的簡單？借助這個小箭頭，我們可以很輕松的定位 HTML 節點。
二、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) 就可以直接選中。
# 三、實戰
上文的知識密度還是有些大的，熟練使用還是需要一些刻意練習。我們這次就用多種姿勢選擇豆瓣電影的評分。
首先我們可以使用 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 選擇器，說不定就在項目中用到了。
四、推薦閱讀
5.聯系我
因為文章發在各大平台上，賬號較多不能及時回復評論和私信，有問題可關注公眾號 ——「鹵蛋實驗室」，（或 wx 搜索 egglabs）關注上車防失聯。
