打开Python爬虫实战练习页面CSS样式偏移混淆文本内容的解析与爬取_H01_Spiderbuf，可以看到页面很简单，内容是《2021胡润中国500强》排行榜。
在网页上点击右键 > 显示网页源代码，找到数据的起始位置，发现其它内容都是直接放在 <p> 标签里面的，唯独企业名称与企业估值(亿元)的位置内容比较多。
把企业名称与企业估值(亿元)的HTML源码的内容与网页上显示的作一下对比，会发现内容的位置不一致。
<div class="col-xs-6 col-lg-4" style="margin-bottom: 30px;">
<h2><i style="width: 32px;position: relative; left: 32px;">讯</i><i style="width: 32px;position: relative; left: -32px;">腾</i><i style="width: 32px;position: relative;">控</i><i style="width: 32px;position: relative;">股</i></h2>
<p>排名：1</p>
<p>企业估值(亿元)：<i style="width: 14px;position: relative; left: 10px;">9</i><i style="width: 14px;position: relative; left: -10px;">3</i><i style="width: 14px;position: relative;">0</i><i style="width: 14px;position: relative;">0</i></p>
<p>CEO：马化腾</p>
<p>行业：互联网服务</p>
</div>
这种情况如果我们使用xpath直接解析获取内容的话，得到的是错误的数据。而且这种情况数据内容的位置有可能是随机的，我们刷新几遍网页，重复查看HTML源码，发现还好，位置都是固定的。
这样我们就好处理了，只要分析出位置调换的规律，然后在爬虫代码里面通过Python代码把位置再调换回来就好了。
如企业名称的位置调换：
hnodes = item.xpath('./h2')
temp = hnodes[0].xpath('string(.)')
s0 = temp[1:2] + temp[0:1] + temp[2:]
print(s0)
这样我们就能够获取到正确的数据了。
这种反爬措施通常称为CSS样式偏移，就是把数据的正确的顺序打乱放在HTML代码里面，再通过CSS的position、left等样式控制数据在浏览器渲染出来的顺序，能达到用户在浏览器里面浏览的时候是正确的但爬虫爬取出来的HTML代码是乱的的目的，以此来消耗爬虫开发者的精力与时间。
完整示例代码：示例代码