3.2.1 网页的样式

CSS的英文全称为"Cascading Style Sheets"，翻译过来即为层叠样式表。3.1节中介绍的HTML用来定义网页的结构,而通过CSS, 可以定义网页的字体，布局，颜色等样式。之所以讲解CSS，是因为Python社区中的某些开源解析器，支持以CSS选择器的方式来解析网页。薯条老师的高级爬虫+安卓逆向培训正在火热招生中，包拿Offer, 详情请点击： http://47.107.239.253/?id=367

3.2.2 CSS基本语法

CSS的基本语法为如下格式：

selector{
property1: value1;
property2: value2;
...
}

selector表示CSS选择器，property: value表示属性值对，属性值对以分号进行分隔。CSS的核心就两点：

(1) 使用选择器选择HTML中的标签

(2) 对选择的HTML标签使用属性-值，来定义样式

如何使用CSS来定义网页样式，不在本教程的介绍范围之内，初学爬虫的读者只需掌握如何通过CSS选择器来选中HTML中的标签。

3.2.3 CSS选择器

(1) 元素选择器

所谓的元素选择器，是指直接通过HTML中的标签名来进行选择。此时选中的标签对应的是HTML中的所有同名标签。比如元素选择器为div，表示选择HTML中的所有div标签。

(2) id选择器

语法形式：

tag_name#id_name

tag_name表示HTML中的标签名，可省略。id_name表示HTML标签中定义的id名。

HTML代码实例:

<div id="container"> </div>

则id选择器div#container，表示选择id为container的div标签。省略标签名时，#container表示选择id为container的HTML标签。由于id的唯一性，所以实际选择的还是div标签。如果HTML中存在多个相同的id，那么选择的是第一个匹配的HTML标签。

(3) class选择器

语法形式:

tag_name.class_name

tag_name表示HTML中的标签，可省略。class_name表示HTML标签中定义的class。

HTML代码实例:

<p class="article"> </p>

则class选择器p.article，表示选择class为article的所有p标签。可以在HTML中定义同一个class的多个HTML标签，代码实例如下：

<p>
段落1
</p>
 
<p>
段落2
</p>

省略标签名时，.article表示选择class为article的所有HTML标签。以下标签都会被选中：

<p  class="article"> </p>
<h2  class="article"> </h2>
<div  class="article"> </div>

CSS选择器中的标签名相当于一个限定符，若无此标签名进行限定，则表示选择与选定条件进行匹配的所有HTML标签。

(4) 属性选择器

语法形式：

tag_name[name="value"]

tag_name表示HTML中的标签，可省略。name表示HTML标签中的属性名，value表示属性值。

HTML代码实例：

<a href="www.chipscoco.com">薯条编程</a>

则属性选择器a[href="www.chipscoco.com"]，表示选择href属性值为www.chipscoco.com的所有a标签。属性选择器中仅包含属性名时，表示选择具有该属性的所有HTML标签，例如a[href]表示选中包含href属性的所有a标签。 省略标签名时，[href]表示选中包含href属性的所有HTML标签。

(5) 派生选择器

语法形式：

tag_name1 tag_name2...

派生选择器表示选择在某一层级之下的所有子标签。

HTML代码实例：

<div>
    <ul>
        <li><div></div></li>
        </ul>
</div>

这是一种三层嵌套的HTML结构，顶级的标签为div ,div下的标签为ul, ul下的块级标签为div,如需选择div下的ul标签，则写法为：

div  ul

选择ul下的div标签，写法为：

ul div

选择div下的所有div标签，写法为：

div div

此时ul下的div标签也会被选中。

各类CSS选择器可以相互组合成复杂的选择器，例如：div#container  .article  a[href]，表示选择id为container的div标签下的，class为article标签下的，具备href属性的所有a标签。同学们在实际开发中，应避免使用复杂难懂的选择器，以减小维护成本。

本节着重介绍的是CSS选择器， 关于CSS的详细用法，同学们可以查找相关资料进行深入学习。在7.3节讲解BeautifulSoup框架时，会再结合代码实例来帮助同学们掌握如何通过CSS选择器来解析网页。

3.2.4 知识要点

(1) CSS的英文全称为“Cascading Style Sheets”，即为层叠样式表。HTML用来定义网页的结构，而CSS用来定义网页的字体，布局，颜色等样式。

(2) CSS主要的选择器：元素选择器，id选择器，class选择器，属性选择器，派生选择器。

3.2.5 最具实力的小班培训

薯条老师在广州有开设线下培训班，小班授课模式，一班最多6个人。也可一对一授课，全程帮助你学好计算机，实现高薪就业。不在广州的同学可提供住宿，也可以报名线上小班，用腾讯会议上直播课。

(1) Python后端工程师高薪就业班，月薪11K-18K，免费领取课程大纲
(2) Python高级爬虫逆向工程师就业班，月薪15K-25K，包拿Offer
(3) Python数据分析+商业分析+数据科学就业班，企业级项目实战，月薪10K-20K
(4) Python量化交易就业班，A股+期货+数字货币量化，月薪10K-40K
(5) Python机器学习+深度学习算法工程师，月薪20-50K