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