填表入門必看，學會用css選擇器后，再看論壇發的外部填表實例，就能輕松學會。 注意：使用軟件自帶的chrome瀏覽器時，建議先按F12，再右鍵審查元素，否則第一次直接通過右鍵審查方式打開，檢查到的元素有誤。 【方法1】 谷歌chrome瀏覽器為例，如下圖：
動畫演示：
步驟： 1、打開相應網頁，按F12打開開發者工具； 2、點擊左上角“小箭頭”按鈕，松開鼠標，把鼠標移動到相應元素上（比如上面的文本搜索框），松開鼠標； 3、下面就會顯示出當前元素的代碼，在代碼上右鍵，Copy - Copy selector， 得到css選擇器：#scbar_txt 這個#號代碼id，就是上面id="scbar_txt"的一種簡寫方式，如果這個選擇器無法正確找到元素，還可以使用其他的， 比如：[name="srchtxt"] 如果有class="stxt"，還可以使用 .stxt 點代表class簡寫方式，也可以這樣寫：[class="stxt"] 【方法2】 谷歌chrome瀏覽器F12-檢查：（不推薦）  動畫演示：
如上圖，在相應元素上，點擊右鍵“檢查”找到相應元素代碼區，在元素代碼區，點擊右鍵菜單 Copy - Copy selector 復制后，得到如下選擇器代碼： #wd 有些元素層數比較深，就會得到下面選擇器代碼： body > div:nth-child(15) > div.ivu-modal-wrap > div > div > div.ivu-modal-body > div.model-input > input 【方法3】 些下拉列表框無法用小箭頭選擇，也無法右鍵審查元素時，可以按照下圖操作選擇：
--上面的下拉列表框，可以點擊黑色小三角形，復制“區塊鏈”行選擇器，得到下面結果： [發布1選擇]#cid > option:nth-child(3)[/發布1選擇] --也可以不點擊黑色小三角形，直接復制當前行選擇器，然后第2個參數填寫要選擇的分類文本： [發布1選擇]#cid,"其它"[/發布1選擇] 例1： [登錄1打開]https://www.baidu.com/[/登錄1打開] --打開百度 [登錄1就緒判斷]#kw[/登錄1就緒判斷] [登錄1寫內容]#kw,"aaa"[/登錄1寫內容] --寫入內容 例2： [登錄1點擊]#two[/登錄1點擊] --點擊按鈕 例3： [發布1點擊]body > div:nth-child(1) > div.bbs > div.wp.clearfix > div.left > div.adv > div.sub > a[/發布1點擊] --點擊a標簽文字 例4： [發布1點擊]body > div:nth-child(18) > div.ivu-modal-wrap > div > div > div.ivu-modal-body > div > div:nth-child(1) > img[/發布1點擊] --點擊圖片 例5： [發布1寫內容]body > div:nth-child(15) > div.ivu-modal-wrap > div > div > div.ivu-modal-body > div.model-input > input,"內容a"[/發布1寫內容] 例6： [發布1選擇]#three,cc[/發布1選擇] --選擇value為cc的選項 例7： [發布1點擊]body > div.ivu-modal-wrap [text="設置"][/發布1點擊] --點擊“設置”按鈕 例8： [發布1點擊][text="設置"][/發布1點擊] --點擊“設置”按鈕，也可以不填里面的2個引號 例9：
比如上面這個class，我們可以直接在前面加一個. 如果遇到中間有空格的，也要加. 結果如下： [發布1點擊].icon_checkbox.js_url_checkbox_icon[/發布1點擊] --方法1 --6.1.03以上版本，如果中間文件加. 會自動識別（詳細查看規則報告） 當然，也可以直接右鍵復制選擇器，結果如下： [發布1點擊]#js_article_url_area > label > i[/發布1點擊] --方法2 Q、舊版填表規則如何快速改為新版的選擇器呢？ 答：很簡單，如 input,id="kw" 直接改為 [id="kw"] 就可以了。 Q、只能用id和class來定位元素嗎？ 答：可以有其他方式 右鍵 - 復制css選擇器 --Copy - Copy selector id="kw" ，選擇器為：id="kw" 簡寫為 #kw 【推薦】 class="btn bg" ，選擇器為：[class="btn bg"] 簡寫為 .btn.bg name="searchsubmit" ，選擇器為：[name="searchsubmit"] --name有時候也會有重復，要注意，下面有提供檢測方法 type="submit" ，選擇器為：[type="submit"] --類型=提交，不推薦用，因為有重復，但是在一些特殊網站，比如搜狗圖片搜索頁面，里面就只有一個這樣的元素，就可以用 【例】 其他不常用，以后再增加.. Q、如果手動定位元素位置？ 答：方法1，在瀏覽器元素界面，按Ctrl+F，輸入找到的元素，黃色醒目位置就是定位到的元素，鼠標放在上面，就能看到網頁中的相應問題了，如下圖  方法2：瀏覽器元素頁面，右鍵復制 JS路徑 ，打開 控制臺 頁面，粘貼復制的JS路徑，回車執行，然后鼠標放在下圖中下面的紅框位置，上面就能定位出相應的元素：
如果輸入一個錯誤的選擇器，會提示 null 如下圖：
Q、css選擇器有些帶有隨機數字怎么辦？ 答：可以百度學習css選擇器，一般直接把 #iname456465546 改為 [id^=iname] 或 #iname456465546 > div1 改為 [id^=iname] > div1 也支持直接文字方式選擇，如[發布1點擊][text="設置"][/發布1點擊] Q、有些文章代碼框中，右鍵沒有彈出菜單怎么辦？ 答：可以用最頂部的方法1，點擊左上角的“小箭頭”按鈕。 Q、如何切換為中文顯示？ 答：首次打開chrome瀏覽器時有如下提示，選擇第一個切換到中文，如下圖。
如果沒有提示，可以在右邊設置里面找到如下地方選擇中文：
Q、哪里有完整的css選擇器文檔查閱？ 答：https://www.runoob.com/cssref/css-selectors.html Q、XPath選擇在哪里呢？ 答：上面圖片中，“Copy XPath”或“復制XPath”就是，和css選擇器使用方法相同，如果遇到特殊情況，可以百度查閱資料。 所有標簽都支持css選擇器和xpath選擇器，軟件對css選擇器的支持更好。 [2019-12-29更新] [2020-10-15更新] [2021-05-22更新] [2021-05-28更新] [2021-06-19更新] [2021-09-01更新] [2021-09-10更新] [2021-10-04更新] [2021-11-05更新] |
搶沙發||關于我們|手機版|營銷神器 (蜀ICP備14013818號)
GMT+8, 2021-12-9 22:54
