CSS选择器入门

爬虫入门之提取页面信息

Posted by Eric on August 17, 2018

前言

CSS选择器是爬虫解析网页很好用的工具,搭配上Beautiful Soup和pyquery等解析库,我们可以通过它来对网页想要爬取的信息进行精确提取

基础语法

css选择器 例子 例子描述
tag[attribute=’value’] p[id=content] p标签中属性id值为content(必须是属性全部的值)的标签
#id #main id为main的标签
.class .news class为news的标签

追加class

<html>
  <div class="jhp"></div>
  <div class="jhp big" id="searchform">
  </div>
</html>

如果想选择class=".jhp big"标签,采用css选择器为.jhp则会提取到两个class中都包含jhp的标签,这样不利于我们对html的解析

这时候采用追加class的方法.jhp.big就可以准确提取到第二个class标签

如果class中包含很多的class,可以通过.继续追加

通配符

css选择器 例子 例子描述
^ div[style^=max-width] div标签中以max-width开头的style属性
$ input[class$=search] input标签中以search结尾的class属性
* a[title*=taobao] a标签中包含taobao的title属性

关系选择器

  • div,p 作用:选择所有div元素和p元素

  • div>p 作用:选择div的直接子元素中的所有p元素

  • div p 作用:选择div的后代元素中的所有p元素

  • div>p 子元素选择器 作用:选取div的直接后代中所有p元素
  • div+p 作用:选取div元素之后相邻的同级p元素
  • div~p 作用:选取div元素后面的同级p元素,不论相邻与否
<html>
  <div id="js-pjax-container" data-pjax-container>
    <div class="auth-form px-3">
      <form action="/session" accept-charset="UTF-8" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input type="hidden" name="authenticity_token" value="DQ7EVx26UgglwwKIyapBP1gdcxz32iXLnHCQSud8X1OwxlCBwM6LnLnAKO6n6/E8pG4NkUR5Y3J2KKSWdc7m4Q=="> 
        <div class="auth-form-header p-0">...</div>
        <div id="js-flash-container">
        
        </div>
      </form>
    </div>
  </div>
</html>

#js-pjax-container .auth-form.px-3 form div+div选取的是id为js-pjax-container嵌套的class为auth-form px-3下嵌套的form标签下嵌套的div标签的同级div标签,也就是id为js-flash-containerdiv标签

伪类选择器

<html>
  <div class="auth-form px-3">
    <form action="/session" accept-charset="UTF-8" method="post">
      <input name="utf8" type="hidden" value="✓">
      <input type="hidden" name="authenticity_token" value="DQ7EVx26UgglwwKIyapBP1gdcxz32iXLnHCQSud8X1OwxlCBwM6LnLnAKO6n6/E8pG4NkUR5Y3J2KKSWdc7m4Q==">
    </form>
  </div>
</html>

input:first-child 提取的是其父节点的第一个子节点的input节点

input:nth-child(2) 提取的是其父节点的第二个子节点的input节点

检测

可以通过在DOM中ctrl+F来在搜索框中输入你书写的css选择器代码查看是否能正确匹配到你想要爬取的标签

如图是对id为main的检测


最近学习爬虫发现自己在解析页面时,对信息的提取做的不是很熟练,所以做个笔记供自己复习和查阅。这些都是我目前爬取用到的一些css语法,随着不断的进阶可能还会继续补充