glidedsky挑战-CSS反爬

相应页面（http://glidedsky.com/level/crawler-css-puzzle-1）：

题目要求：

 

再看看页面：

 

分析这个页面的特点：

1. 页面显示出来的数据不同
2. 页面中部分显示的数据可能在标签中不显示
3. 页面中出现数字顺序是乱的，不好组合拼接，如第3个字符（346对应634）
4. 页面中，有些字符还出现其它的数字来扰乱数字。

 

然后我们再分析页面。

 

 

是不是这些数据似曾相识，没错了，这些CSS 就是页面数字显示出来的规则。没办法了，那就分析、研究呗。

 

说说我总结出来的几点吧：

• css中 有 content的，标签中必定没有数字。如：.FF0wIJ:before { content:"293" }
• css中 有 { left:-1em }，是数字顺序，其中部分数据可能没有这个属性，那它就是 0em。如：.CP5WRpgT { left:-1em }
• css中 有{ opacity:0 }，那么这个数字是无效的，只是用来干扰。如：.qx11BjWx { opacity:0 }

 

那么知道规则了，那就写算法实现它吧。

应于网站要求，这里只说思路，不提供代码。

1、获取页面，解析出标签和css样式，保存下来。

2、根据规则，写算法实现。

3、记录数字，进行求和。

4、获取下一面数据，再重复第一步。

 

这里第2步比较难，因为它的规则不一，需要作出各种判断。

提示一下，难点在于数字顺序，可以通过定个数字下标来记录，设一处定点值，当它产生一个，加入到队列，定点值就加1。