01
原理
在搭建网页的时候，我们需要用CSS来控制各类字符的位置，也正是如此，我们可以利用CSS来将浏览器中显示的文字，在HTML中以乱序的方式存储，从而来限制爬虫。如下图，我们发现浏览器中实际显示的是，但是HTML中显示的是。
接下来，我们通过一个例子来了解绕过CSS偏移反爬虫的方法。
02
绕过
从下图中我们看出机票价格的数据被包裹在一个span标签中，标签大小是64px。如下图所示：
进一步对网页进行观察发现，span标签中有五个b标签，它们每一对b标签都有特定的样式。如下图所示：
我们用这些CSS样式来进行分析的话，我们发现，第一对b标签中的四对i标签刚好占满了span标签的位置。如下图所示：
浏览器中，本应显示的是，因为第二、三、四、五对b标签中有值，所以我们还需要看一下他们的位置。
第二对的b标签的位置样式是left:-64px,所以第二对b标签中的1就会覆盖第一对b标签中第一对i标签中的5；第三对的b标签的位置样式是left:-32px,第三对b标签中的2会覆盖第一对b标签中第三对i标签中的7。依次类推，第四对b标签中的6会覆盖第一对b标签中第四对i标签中的7，第五对b标签中的2会覆盖第一对b标签中第二对i标签中的3。
通过上面的分析，我们发现，CSS偏移反爬虫其实就是让几个数据由CSS控制位置，来对原数据进行覆盖，从而实现反爬效果。
那么当我们遇到这类反爬虫的时候，首先就需要对页面的CSS进行观察分析，找到偏移量的计算规律，然后提取出每个标签中left的值，根据规律来排列出真实的数据。
当然，会有读者说，我们找到了规律，但是不会提取标签中的数据怎么办？不用担心，在之前的文章中，志斌介绍过如和用BS4提取数据的方式，其中就有提取标签数据的方法，有不懂的小伙伴，可以看看这篇文章学会BS4，轻松解决数据提取！。
03
小结
1.CSS偏移反爬虫实质上是通过CSS样式来控制数据在页面中显示的位置，从而将乱序的数据以正常的形式展示给用户。
2.破解这种反爬虫的难度并不大，主要是找到位置偏移的计算方法，而且代码书写可能较为繁琐，读者们可以提前写好流程图，然后在进行书写。
3.目前这种反爬虫方法主要是针对于数字数据的反爬。
4.本文旨在学习与研究CSS偏移反爬虫，请大家不要用于非法用途。
END
未闻Code·知识星球开放啦！
一对一答疑爬虫相关问题
职业生涯咨询
面试经验分享
每周直播分享
......
未闻Code·知识星球期待与你相见~
一二线大厂在职员工
十多年码龄的编程老鸟
国内外高校在读学生
中小学刚刚入门的新人
在“未闻Code技术交流群”等你来！
入群方式：添加