Glidedsky系列—爬虫CSS反爬

前言

题目网址为：http://glidedsky.com/level/web/crawler-css-puzzle-1

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、题目描述

二、题目分析

1.网页分析

我们看到的网页展示效果：

网页对应的源码：

我们可以发现网页所展示的内容跟我们看到的div文本内容有些差异，如果直接获取文本内容，得到的值肯定是不对的，这次网页使用的是CSS反爬，可以利用CSS样式来改变div属性的位置、数值、以及是否可见等等，这种类型的反爬不难，总的来说就是找规律，需要耗费一定的精力去找寻它的变化规律。

我们开始逐个分析div的样式，其中文本值为4的div样式属性,我们可以看到这个4在页面展示中是没有的，它其中的样式属性opacity是css样式中设置透明度的，值为0，也就不可见

我们在前端看到的数值为369，而div中剩下数字顺序为6，3，9 我们再继续分析每个数字的样式属性



我们观察发现，9位置没有变化，它的样式中不包含left属性，而位置发生的6和3都有left属性，6的left值为1em,3的left值为-1em,通过width属性我们可以知道，每个数字的宽度就是1em，而6向右偏移1个单位，3向左偏移一个单位就恰好是我们最终看到的页面效果，我们就此猜测数字最终的位置就是初始的位置加上left上的数值，然后我们可以观察后面的div来验证我们的猜想。

然而事情并没有这么快就结束，我们发现数值77对应的div下面一个文本数值都没有，只有一个奇奇怪怪的::before，本着不懂就百度的心态，CSS的知识点又增加了

其中的content值就是我们需要的

查看网页的源码，我们可以找到样式对应的属性

---

2.代码实现

代码如下：

import re
import requests
from lxml import etree

def get_token():
    resp = s.get(login_url)
    token = re.findall('<meta name=&#