glidedsky-爬虫-CSS反爬

  这一道题是css反爬,看看题目。

  glidedsky-爬虫-CSS反爬

 

   直接上网站,http://glidedsky.com/level/web/crawler-css-puzzle-1。首先也是先来看看源码,可以发现显示数字的div是这样的。

  glidedsky-爬虫-CSS反爬

 

   有些有数字有些没有,那么先随便复制一个class搜索看看,发现他们的样式就在源码上面。

  glidedsky-爬虫-CSS反爬

 

   那么找到了css的样式,现在只要找出怎么隐藏数字,怎么显示数字的就可以了。我用的方法是打开检查,选中数字,再取消它的样式,很容易就发现了它的规律。

  glidedsky-爬虫-CSS反爬

  通过观察可以发现,样式一般有三种形式;第一种是有两个div,只有一个有数字,但是第一个数字是隐藏的,第二个div的样式里面有一个content,是真实的数字;第二种是有真实数量的数字,比如上面的183,那么就有3个div和3个数字,但是这三个数字的位置是会改变的,而改变的位置是和样式的‘left:1em‘这些有关,改变的规律是在原有的位置进行偏移,1em就是向右偏移一个位置,所以上图的3本来在第二个位置的就偏移到第三个位置了,但不是每个数字都会偏移,有‘left:[d]em‘这个属性的才会有偏移;第三种是比真实数量的数字要多一个,多出来的数字是第一个,然后这个数字是隐藏的,剩下的数字会进行偏移或不偏移。

  根据网站要求,就不贴具体代码了,分享一下思路。

  1、将源码中css部分转成一个字典,class为键,值是一个列表的形式,是class的各个值。

  2、遍历div[@class="col-md-d"],保存下面的div的class和数字,保存为两个列表,class_name_list和num_list。

  3、接下来主要功夫都在这里,首先通过比较两个list的长度,如果不一致,就是上述的第一种情况,获取content里面的数字就可以了;然后是剩下的两种情况,一种是它们的长度比真实的数字长度多,另一种是和真实数字的长度一致,这个通过判断第一个div的属性里面有没有‘opacity:0‘这个值,如果有就是比真实数字长度多的情况,如果没有就是长度一致的情况,因为数字一般是两位或者三位的,所以生成一个两位或者三位的列表来存储数字,再取偏移量调整数字的位置。

  4、将列表中的数字整合起来再相加就得到结果了。

glidedsky-爬虫-CSS反爬

上一篇:上传本地代码及更新代码到GitHub教程


下一篇:jQuery:delegate中select()不起作用的解决方法