A. R爬蟲必備基礎——CSS+SelectorGadget
CSS ，全稱叫作Cascading Style Sheets，即 層疊樣式表 。「層疊」是指當在HTML中引用了數個樣式文件，並且樣式發生沖突時，瀏覽器能依據層疊順序處理。「樣式」指網頁中文字大小、顏色、元素間距、排列等格式。HTML定義了網頁的結構，但是只有HTML頁面的布局並不美觀，可能只是簡單的節點元素的排列，為了 讓網頁看起來更好看一些 ，這里藉助了CSS。CSS是 目前唯一的網頁頁面排版樣式標准 ，有了它的幫助，頁面才會變得更為美觀。如下圖的右側，即為CSS。
就局部放大來看，下圖所示就是一個CSS樣式。 大括弧前面 是一個CSS 選擇器 ，此選擇器的意思是 首先選中 id為head_wrapper且class為s-ps-islite的 節點 ，然後 再選中 其內部的class為s-p-top的 節點 。大括弧內部寫的就是一條條 樣式規則 ，例如 position 指定了這個元素的布局方式為 絕對布局 ，bottom指定元素的 下邊距 為40像素，width指定了 寬度 為100%占滿父元素，height則指定了元素的 高度 。也就是說，我們將位置、寬度、高度等樣式配置統一寫成這樣的形式，然後用大括弧括起來，接著在開頭再加上CSS選擇器，這就代表 這個樣式對CSS選擇器選中的元素生效 ，元素就會根據此樣式來展示了。在網頁中，一般會統一定義整個網頁的樣式規則，並寫入CSS文件中（其後綴為css）。在HTML中，只需要用link標簽即可引入寫好的CSS文件，這樣整個頁面就會變得美觀、優雅。
在爬蟲過程中都需要爬取目標的 節點 ，我們知道網頁由一個個 節點 組成， CSS選擇器會根據不同的節點 設置不同的樣式規則， 那什麼是節點 ？又 怎樣來定位節點 呢？下面圍繞這兩個問題進行介紹。
在HTML中，所有 標簽定義的內容都是節點 ，它們構成了一個HTML DOM樹。我們先看下什麼是DOM，DOM是W3C（萬維網聯盟）的標准，其英文全稱Document Object Model，即 文檔對象模型 。它定義了訪問HTML和XML文檔的標准：W3C文檔對象模型（DOM）是中立於平台和語言的介面，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。W3C DOM標准被分為如下3個不同的部分：
核心DOM ：針對任何結構化文檔的標准模型。
XML DOM ：針對XML文檔的標准模型。
HTML DOM ：針對HTML文檔的標准模型。
根據W3C的HTML DOM標准，HTML文檔中的所有內容都是節點。 整個文檔 是一個文檔節點； 每個HTML元素 是元素節點；HTML 元素內的文本 是文本節點；每個HTML 屬性 是屬性節點； 注釋 是注釋節點。HTML DOM將HTML文檔視作樹結構，這種結構被稱為節點樹，如下圖所示。
節點樹中的節點 彼此擁有層級關系 。我們常用父（parent）、子（child）和兄弟（sibling）等術語描述這些關系。父節點擁有子節點，同級的子節點被稱為兄弟節點。在節點樹中， 頂端節點稱為根 （root）。除了根節點之外，每個 節點都有父節點 ，同時可擁有任意數量的子節點或兄弟節點。下圖展示了節點樹以及節點之間的關系。
在CSS中，我們使用 CSS選擇器來定位節點 。例如，下圖中div節點的id為container，那麼就可以表示為#container，其中#開頭代表選擇id，其後緊跟id的名稱。另外，如果我們想選擇class為wrapper的節點，便可以使用.wrapper，這里以點（.）開頭代表選擇class，其後緊跟class的名稱。另外，還有一種選擇方式，那就是 根據標簽名篩選 ，例如想選擇二級標題，直接用h2即可。這是最常用的3種表示，分別是 根據id、class、標簽名篩選 ，請牢記它們的寫法。
另外，CSS選擇器還支持 嵌套選擇 ，各個選擇器之間加上空格分隔開便可以代表嵌套關系，如#container .wrapper p則代表先選擇id為container的節點，然後選中其內部的class為wrapper的節點，然後再進一步選中其內部的p節點。另外，如果不加空格，則代表並列關系，如div#container .wrapper p.text代表先選擇id為container的div節點，然後選中其內部的class為wrapper的節點，再進一步選中其內部的class為text的p節點。這就是CSS選擇器，其篩選功能還是非常強大的。另外，CSS選擇器還有一些其他語法規則，具體如下表所示。
但是，這樣每次都要浪費部分時間去尋找定位點，這樣既不很方便，也不高效，那麼如何提高爬蟲中這部分工作的效率呢？今天我給大家分享一個爬蟲的利器，它就是：SelectorGadget 插件。
point and click CSS selectors，強大的谷歌插件 CSS生成器 ，有助於我們快速找到html的節點信息，它也支持Xpath表達式。Selector Gadget是一個開源的Chrome擴展程序，可以輕松地在復雜的網站上生成和選擇CSS選擇器。安裝擴展程序後，轉到任意頁面並啟動它。網站右下方會打開一個方框。 單擊您希望選擇器匹配的頁面元素（它將變為綠色）。然後SelectorGadget將為該元素生成一個最小的CSS選擇器，並突出顯示（黃色）選擇器匹配的所有內容。現在單擊突出顯示的元素將其從選擇器中刪除（紅色），或單擊未突出顯示的元素將其添加到選擇器。 通過這個選擇和拒絕過程，SelectorGadget可以幫助您找到滿足您需求的完美CSS選擇器。
首先需要安裝一下這個神器。在谷歌瀏覽器中的應用商店裡，搜索到SelectorGadget插件，點擊「添加至Chrome」即可。如果不能打開Chrome應用商店，可以通過網上的其他途徑獲取該插件，之後再手動添加至谷歌瀏覽器即可。手動添加方法是：打開谷歌瀏覽器擴展程序，並開啟開發者模式，將該插件拖拽到瀏覽器里，如果不成功，可以選擇「載入已解壓的擴展程序」，將該文件夾先壓縮再解壓添加進去。
同時在頁面欄上能看到紅框處的SelectorGadget標志。
咱們以 https://www.yugaopian.cn/ 網頁為例，首先點擊網頁上方的SelectorGadget，然後在網頁下方彈出SelectorGadget框。接下來，咱們嘗試一下如何使用？比如我們想定位「拆彈專家2」的節點，直接點擊它，則會在框內顯示其節點—— .item-title （如下圖）。綠色：單擊希望選擇器匹配的頁面元素。黃色：生成的這個CSS選擇器【 .item-title 】能匹配的所有內容，從下圖可以發現該CSS選擇器可以抓取哪些信息。當你把滑鼠放到這些高亮的元素上時，會顯示紅色，代表要將其從選擇器中刪除；而單擊未突出顯示的元素將其添加到選擇器。
在實際構建CSS表達式過程中，需要搭配 網頁開發工具 里的 selector功能使用，非常方便。比如：定位抓取以下網頁（ https://www.yugaopian.cn/allmovies ）紅框內的所有電影名稱信息。
具體操作流程如下：在某一電影名稱下右擊——檢查，定位到電影名稱的網頁源碼處，然後右擊—— selector，再打開SelectorGadget，在框內粘貼CSS表達式，按Enter鍵，發現在網頁中准確定位出該電影名稱。但我們需要定位所有的電影名稱，在已有的CSS表達式【（body > div:nth-child(5) > div.inner-wrapper > div.inner-2col-main > div > ul > li:nth-child(1) > a > span.item-title）】上進行修改，這里可以發現【li:nth-child(1)】只選取了第一個，而我們所需選取所有，因此去掉後面的【(1)】即可。在具體實踐中，如何修改還有有賴於小夥伴對網頁結構和CSS語法的理解。最終，獲取以上紅框內電影名稱的CSS選擇器表達式為：【body > div:nth-child(5) > div.inner-wrapper > div.inner-2col-main > div > ul > li:nth-child > a > span.item-title】。在實際應用中，不同節點標簽之間用空格分隔：【body div:nth-child(5) div.inner-wrapper div.inner-2col-main div ul li:nth-child a span.item-title】。
但在SelectorGadget使用中，發現其構建的CSS表達式往往很復雜，大部分情況下其實也是可以自己構建CSS表達式的。構建CSS選擇表達式的關鍵在於清楚整個網頁結構，找到標簽之間的屬於關系、屬性值屬於哪個標簽等，就可以比較快速的構建。而且瀏覽器很智能，滑鼠在源碼上的位置，可以在網頁顯示上呈現陰影，這個功能簡直太香了。以上紅框內所有電影名字的CSS表達式也可以表示為：【div.movlist ul li a span.item-title】
然後用SelectorGadget驗證，如下圖，發現高亮選中的部分就是我想要定位的信息，說明這個CSS表達式正確。
以上簡單介紹了如何構建CSS表達式，在爬蟲過程中定位抓取特定節點數據是非常重要的一步，有了這步才有下游的精準數據提取與清洗。希望本次教程能給有需要的小夥伴一點小小幫助！
更多內容可關注公共號「YJY技能修煉」~~~
往期回顧
R爬蟲在工作中的一點妙用
R爬蟲必備基礎——HTML和CSS初識
R爬蟲必備基礎——靜態網頁+動態網頁
R爬蟲必備——rvest包的使用