这一道题是css反爬,看看题目。
直接上网站,http://glidedsky.com/level/web/crawler-css-puzzle-1。首先也是先来看看源码,可以发现显示数字的div是这样的。
有些有数字有些没有,那么先随便复制一个class搜索看看,发现他们的样式就在源码上面。
那么找到了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、将列表中的数字整合起来再相加就得到结果了。