
2.4 网页分析方法3:CSS选择语法
CSS指层叠样式表 (Cascading Style Sheets),用来定义如何显示HTML元素,一般和HTML文件一起使用,通过对HTML标签的修饰来解决内容与表现分离的问题。
CSS规则由两个主要的部分构成:选择器以及一条或多条声明,具体如下:

选择器通常是需要改变样式的HTML元素,需要指定具体的标签。每条声明由一个属性和一个值组成。属性(Property)是我们希望设置的样式属性(Style Attribute)。每个属性有一个值。属性和值被冒号分开。在进行爬虫开发时,主要通过选择器来进行相关元素的提取,因此我们主要对选择器的相关用法做讲解,其他的内容如有兴趣,读者可自行查看相关资料。
CSS的选择器主要包括元素选择器、类选择器、ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器。下面将根据如下文档进行具体讲解:

2.4.1 元素选择器
最常见的CSS选择器是元素选择器。也就是说,文档中的元素就是基本的选择器,比如p、h1、div、a,如表2-9所示。
表2-9 CSS元素选择器

2.4.2 类选择器
类选择器允许以一种独立于文档元素的方式来指定元素,该选择器可以单独使用,也可以与其他元素结合使用,如表2-10所示。
表2-10 CSS类选择器

2.4.3 ID选择器
ID选择器与类选择器类似,不同的是ID选择器以“#”开始,并且由于在HTML文档中ID值是唯一的,因此比class更方便使用,但并不是每个标签都有ID,使用方法如表2-11所示。
表2-11 CSS ID选择器

2.4.4 属性选择器
如果希望选择有某个属性的元素,则可以使用属性选择器,不仅限于class和id属性,如表2-12所示。
表2-12 CSS属性选择器

2.4.5 后代选择器
后代选择器(Descendant Selector)又称为包含选择器,可以选择作为某元素后代的元素,如表2-13所示。
表2-13 CSS后代选择器

2.4.6 子元素选择器
如果不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,可以使用子元素选择器(Child Selector),如表2-14所示。
表2-14 CSS子元素选择器

2.4.7 相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent Sibling Selector),如表2-15所示。
表2-15 CSS相邻兄弟选择器

单独使用某一种选择器实现选取指定元素的情况并不常见,多数情况下需要组合使用,如表2-16所示。
表2-16 CSS选择器组合使用
