面试题 五 css 加密的反爬虫

因为我工作中没遇见过，所以网上搜了一个。

一 CSS的作用

为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。

这里讲解一下CSS反爬需要用到的知识：

1.伪元素选择器：伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}

2. 关于定位

我们可以使用css的position属性来设置元素的定位类型，position的设置项如下：

image.png

3. 定位元素的偏移

定位元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移量

实战

某评 评论数 css 加密 破解

爬到的评论数

     <svgmtsi>&#xf784;</svgmtsi>

我们先记录下标签中的class值：shopNum（为什么记录，先不要着急，后面会讲到），然后在源代码中查找svg，我们发现了如下内容：

image.png
大宝藏被挖掘了。

这好像是个链接，我们点击一下，发现页面跳转到了一个全新的水月洞天：

image.png
通过url下载完成后，我们在浏览器中打开woff的翻译工具：
http://fontstore.baidu.com/static/editor/index.html
我们把前面的&#x去掉并替换成uni，后面的；去掉，得到字段为：unif784。

秘密揭晓了：

image.png

接下来怎么操作我就看不懂了，感兴趣的可以看这 参考