【爬虫攻略】爬虫所需的css基础

百科大全

更新时间：2025-10-05 10:27:0847

admin管理员组
文章数量:1794759

【爬虫攻略】爬虫所需的css基础

css概述 css简介

css，也就是层叠样式表，是网页中常用的html，css，javascript，最重要的三部分之一

html已经完成了网页的内容和结构，为什么还需要css呢？事实上，在比较早的时候，人们对于网页的要求没有那么高，在html中就可以完成页面的结构和样式了，但是随着网页的不断发展，在html中同时完成网页的结构和样式的行为就渐渐的不再适宜了，主要原因在于，页面的样式写在了html里面，分散而混乱，没有一个整体的规划，修改起来也很不方便

因此，页面的结构和样式就分离了，成为了html和css两个部分，css就负责页面的样式，也就是页面的美观。也可以简单理解为，css就是让页面变得更好看的，可以使文字变大，变小，变漂亮

当然，早期的css确实也主要只做页面样式。但是随着flash的淘汰，以及javascript做动画的性能不高，主要在css3以后，css又增加了一个主要的功能，也就是只做动画。比如说页面等待时会出现的转圈圈的图标，有的时候会遇到的大风车等等，现在也是由css制作的

css的使用

使用css是很简单的，首先选择一个标签，然后为其设置属性即可，比如说，我们有以下的一个简单的html页面

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>css测试页面</title> </head> <body> <h1>这是一个h1标题</h1> </body> </html>

我们希望改变其中页面标题，也就是h1的样式，那么只要这样做即可，其中，在css里，注释使用/* */，这一点和html也很不一样

如此简单设置以后，就可以看到一个很基础的页面效果了

css的引入方式

css可以在html的页面中直接使用，例如在head部分，加上style标签以后，就可以使用css了

当然，这种内嵌式的css很少会在比较大的网站，或者具有一定规模的网站上出现，一般都是通过link标签引入写好的css文件的

css文件一般的后缀名就是css，因此如果在请求中看到了.css的文件，我们基本上就可以确定，这是引入了一个样式文件

css对于爬虫的意义

本系列是爬虫攻略，自然不是主要用来介绍如何写css样式的，那么还是回到我们的最关心的问题。既然css是做页面样式的，那么它对于爬虫来说有什么意义呢？我们需要关心页面样式吗？

当然，通常意义上来说，css对于爬虫意义不大，一般不需要关注css的样式，这一点确实没错。不过css并非是对于爬虫没有用的。比如说，css选择器的使用，对于数据提取就是有意义的

除此之外，现在很多的页面反爬，也会用到css，比如说，在css中设置字体，使得html中全都是看不懂的文字，但是在浏览器的页面上就可以正常显示，再比如说，通过css将某些链接标签设置为了隐藏，在正常的页面中是看不到这些标签内容的，只有不正常的爬虫程序，才会在批量提取的时候，把这些隐藏标签提取出来，这样一点击，就会出现问题。当然，css反爬的内容十分复杂，并非本文的重点

总而言之，css虽然一般来说不是爬虫主要关注的内容，但是并非是没有作用的。尤其是css的选择器，是应该要掌握的内容

css选择器基本选择器

最常用的选择器，也就是标签选择器，id选择器和类选择器，是必须要会使用的

类选择器使用.作为开头

<div class="content">这是一个普通无奇的div标签</div>

id选择器使用#作为开头

<div id="content">这是一个普通无奇的div标签</div>

标签选择器直接使用标签名即可

<div id="content" class="content">这是一个普通无奇的div标签</div>

如果要选择全部，使用*即可

层级选择器

逗号和空格是不同的，这一点一定要注意区别，具体例子如下

<div id="content" class="content">这是一个普通无奇的div标签</div> <p id="content" class="content">这是一个普通无奇的p标签</p>

如果使用空格的话，代表的是当前层次中的下一层，或者说嵌套在内部的那一层

<div id="content" class="content"> <p>这是一个在div内部的p标签</p> </div> 其他选择器

如果使用>，代表父节点是某个标签的标签，比如说div>p，这个选择器表示所有父节点是div标签的p标签

如果使用+，代表紧邻某个标签的标签，比如说div+p，这个选择器表示的是紧跟在div之后的所有p标签

如果使用[]，代表存在某个属性的标签，比如说[href]，这个选择器就表示所有有href属性的标签

如果使用[a=b]，代表某个属性是某个值的标签，比如说[href=index]，这个选择器就表示所有href属性为index的标签

如果使用[a~=b]，代表某个属性中有某个值的标签，比如说[href~=index]，这个选择器就表示所有href属性中有index的标签

css的选择器还有很多，当然很多选择器在爬虫中并不常用，因此在这里就不特别描述了。如果你有这方面的需求，可以查看css选择的文档，比如说查看菜鸟教程

css总结

css作为web页面的样式，自然是非常重要的存在。无论是文本，图片的属性样式的设置，css盒子模型的布局，伪类和伪元素的选择器，或者是css的动画，变形的制作，在web前端之中，都是极其重要的部分，是绝对不可以忽视的

当然，如同我们之前分析的那样，css对于爬虫的意义，相对而言就没有那么大了，至少对于爬虫来说，如果你没有学过css的话，并没有必要花很大力气去学习如何使用css设置样式，进行盒子布局等等

当然，我们之前也分析了，由于近些年反爬力度的提高，使用css进行反爬也比以前更多了，而恰恰由于很多爬虫程序员对于css的知识的不了解，在面对css反爬上，没什么好的办法，这也是事实

所以，最终，我的结论是，如果你觉得自己需要用到css的话，那么就有必要再专门进行一些学习。如果你并非专业人士，只是爬虫入门的话，那么对于css只需要进行简单的了解，学会基本的选择器就可以了，不需要现在就在这个方面上投入更多的时间学习了

查看更多python爬虫攻略，请点击这里

本文标签：爬虫所需攻略基础 css

版权声明：本文标题：【爬虫攻略】爬虫所需的css基础内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686971697a123956.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。