本文转载自微信公众号《智斌的python笔记》，作者智斌。转载本文请联系志斌python笔记公众号。大家好，我是志斌~前几天在爬某网站的时候遇到了一个CSS偏移反爬虫。它是一种反爬虫，使用CSS样式将乱序的文本格式化为人类正常的阅读顺序。今天智斌就来和大家分享如何绕过这类反爬虫。01原理在构建网页的时候，我们需要用CSS来控制各种字符的位置，正是如此。我们可以使用CSS将浏览器中显示的文本以随机的方式存储在HTML中，从而达到限制爬虫的目的。如下图，我们发现浏览器实际显示的是1226，但是HTML显示的是1262。接下来我们通过一个例子来了解如何绕过CSS偏移反爬虫。02Bypass从下图可以看出，机票价格数据被包裹在一个64px大小的标签中。如下图所示：进一步观察网页发现标签中有五个标签，每一对标签都有特定的样式。如下图所示：如果我们使用这些CSS样式来分析，我们发现第一对标签中的四对标签正好占据了标签的位置。如下图所示：在浏览器中应该显示5377，因为第二、三、四、五对标签是有值的，所以我们需要看他们的位置。第二对标签的位置样式为left:-64px，所以第二对标签中的1会覆盖第一对中第一对标签中的5>标签；第三对标签的位置样式为left:-32px，第三对标签中的2将覆盖第一对中第三对标签中的7>标签。以此类推，第四对标签中的6会覆盖第一对标签中第四对标签中的7，以及第五对标签中的2将覆盖第一对<3在第二对标签中的b>标签。通过上面的分析，我们发现CSS偏移反爬虫实际上是让CSS控制多个数据覆盖原来的数据，从而达到反爬虫的效果。那么当我们遇到这种反爬虫的时候，我们首先需要观察和分析页面的CSS，找到偏移量的计算规律，然后提取每个标签中left的值，按照真实的数据进行排列法律。当然，有读者会说我们找到规律了，但是如果提取不到标签中的数据怎么办？别着急，志斌在上一篇文章中介绍了如和用BS4提取数据的方法，包括提取标签，不了解数据方法的小伙伴可以看这篇学习BS4，轻松解决数据提取！.03小结1.CSS偏移反爬虫本质上是通过CSS样式来控制数据在页面中的显示位置，让乱序的数据以正常的形式展现给用户。2.破解这种反爬虫难度不大。主要是找到位置偏移量的计算方法，代码写起来可能比较繁琐。读者可以先把流程图写好再写。3、目前的反爬虫方法主要针对数字数据的反爬虫。4、本文旨在学习研究CSS偏移反爬虫，请勿用于非法用途。
