选定所有对象。
语法
以文档语言对象类型作为选择符。即 html 中的标签
语法
以唯一标识符 id 属性等于 myid 的 E 对象作为选择符。
语法
以 class 属性包含 myclass 的 E 对象作为选择符。
不同于 id 选择符 的唯一性，类选择符可以同时定义多个,并控制多个元素的样式
语法
群组选择器 (selector1,selectorN) 是将具有 相同样式 的元素分组在一起，每个选择器之间用逗号( , )隔开。
语法
后代选择器( E F )是选择 E 元素的所有后代 F 元素，不管 F 元素是 E 元素的子元素、孙元素或者更深层的关系，都会被选中。
语法
子选择器( E>F )是选择 E 元素的所有子后代 F 元素，注意 F 元素仅仅是 E 元素的子元素而已。
语法
兄弟选择器( E~F )是 CSS3 新增选择器，代表 E 和 F 具有同一个父元素，并且 F 元素在 E 元素后面，但是不用相邻。
例子
语法
相邻选择器( E+F )是 E 和 F 具有同一个父元素，并且 F 元素在 E 元素后面且相邻。
语法
简介
根据具有链接属性的 E 元素的被访问情况进行匹配。
例子
index.html
index.css
简介
根据用户对于 E 元素的操作来进行匹配。
例子
index.html
index.css
作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名{}
作用：通过元素的class属性值选中一组元素
语法：.class属性值{}
id选择器
作用：通过元素的id属性值选中唯一的一个元素
语法：#id属性值{}
复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器N{}
选择器分组（并集选择器）
作用：通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N{}
通配选择器
作用：可以用来选中页面中的所有的元素
语法：*{}
元素之间的关系：
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{}
有时候，你需要选择本身没有标签，但是 仍然易于识别的网页部位，比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器：伪类和伪元素。
给链接定义样式：
有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4中不同的方式。
其他：
否定伪类
否定伪类可以帮助我们选择不是其他东西的某种东西。
语法： :not(选择器){}
比如p:not(.hello)标识选择所有的p元素，但是class为hello的除外。
属性选择器可以挑选带有特殊属性的标签。
语法：
[属性名]
[属性名 = "属性值"]
[属性名 ~= "属性值"]
[属性名 ^= "属性值"]
[属性名 |= "属性值"]
[属性名 $= "属性值"]
[属性名 *= "属性值"]
作用：选中指定父元素的指定子元素
语法：父元素 >子元素
比如body >h1将选择body字标签中的所有h1标签
IE6及以下的浏览器不支持子元素选择器
其他子元素选择器
除了根据祖先父子关系，还可以根据兄弟关系查找元素。
语法：
兄弟元素 + 兄弟元素 ：查找后边一个兄弟元素
兄弟元素 ~ 兄弟元素：查找后边所有的兄弟元素
在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中。
比如：
这两个选择器都会选择h1元素，如果两个选择器设置的样式不一样那还好不会产生冲突，但是如果两个选择器设置的是同一个样式，这样h1到底要应用哪个样式呢？CSS中会默认使用权重较大的样式，下面看一下权重又是如何计算的。
不同的选择器有不同的权重值：
CSS ，全称叫作Cascading Style Sheets，即 层叠样式表 。“层叠”是指当在HTML中引用了数个样式文件，并且样式发生冲突时，浏览器能依据层叠顺序处理。“样式”指网页中文字大小、颜色、元素间距、排列等格式。HTML定义了网页的结构，但是只有HTML页面的布局并不美观，可能只是简单的节点元素的排列，为了 让网页看起来更好看一些 ，这里借助了CSS。CSS是 目前唯一的网页页面排版样式标准 ，有了它的帮助，页面才会变得更为美观。如下图的右侧，即为CSS。
就局部放大来看，下图所示就是一个CSS样式。 大括号前面 是一个CSS 选择器 ，此选择器的意思是 首先选中 id为head_wrapper且class为s-ps-islite的 节点 ，然后 再选中 其内部的class为s-p-top的 节点 。大括号内部写的就是一条条 样式规则 ，例如 position 指定了这个元素的布局方式为 绝对布局 ，bottom指定元素的 下边距 为40像素，width指定了 宽度 为100%占满父元素，height则指定了元素的 高度 。也就是说，我们将位置、宽度、高度等样式配置统一写成这样的形式，然后用大括号括起来，接着在开头再加上CSS选择器，这就代表 这个样式对CSS选择器选中的元素生效 ，元素就会根据此样式来展示了。在网页中，一般会统一定义整个网页的样式规则，并写入CSS文件中（其后缀为css）。在HTML中，只需要用link标签即可引入写好的CSS文件，这样整个页面就会变得美观、优雅。
在爬虫过程中都需要爬取目标的 节点 ，我们知道网页由一个个 节点 组成， CSS选择器会根据不同的节点 设置不同的样式规则， 那什么是节点 ？又 怎样来定位节点 呢？下面围绕这两个问题进行介绍。
在HTML中，所有 标签定义的内容都是节点 ，它们构成了一个HTML DOM树。我们先看下什么是DOM，DOM是W3C（万维网联盟）的标准，其英文全称Document Object Model，即 文档对象模型 。它定义了访问HTML和XML文档的标准：W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。W3C DOM标准被分为如下3个不同的部分：
核心DOM ：针对任何结构化文档的标准模型。
XML DOM ：针对XML文档的标准模型。
HTML DOM ：针对HTML文档的标准模型。
根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点。 整个文档 是一个文档节点； 每个HTML元素 是元素节点；HTML 元素内的文本 是文本节点；每个HTML 属性 是属性节点； 注释 是注释节点。HTML DOM将HTML文档视作树结构，这种结构被称为节点树，如下图所示。
节点树中的节点 彼此拥有层级关系 。我们常用父（parent）、子（child）和兄弟（sibling）等术语描述这些关系。父节点拥有子节点，同级的子节点被称为兄弟节点。在节点树中， 顶端节点称为根 （root）。除了根节点之外，每个 节点都有父节点 ，同时可拥有任意数量的子节点或兄弟节点。下图展示了节点树以及节点之间的关系。
在CSS中，我们使用 CSS选择器来定位节点 。例如，下图中div节点的id为container，那么就可以表示为#container，其中#开头代表选择id，其后紧跟id的名称。另外，如果我们想选择class为wrapper的节点，便可以使用.wrapper，这里以点（.）开头代表选择class，其后紧跟class的名称。另外，还有一种选择方式，那就是 根据标签名筛选 ，例如想选择二级标题，直接用h2即可。这是最常用的3种表示，分别是 根据id、class、标签名筛选 ，请牢记它们的写法。
另外，CSS选择器还支持 嵌套选择 ，各个选择器之间加上空格分隔开便可以代表嵌套关系，如#container .wrapper p则代表先选择id为container的节点，然后选中其内部的class为wrapper的节点，然后再进一步选中其内部的p节点。另外，如果不加空格，则代表并列关系，如div#container .wrapper p.text代表先选择id为container的div节点，然后选中其内部的class为wrapper的节点，再进一步选中其内部的class为text的p节点。这就是CSS选择器，其筛选功能还是非常强大的。另外，CSS选择器还有一些其他语法规则，具体如下表所示。
但是，这样每次都要浪费部分时间去寻找定位点，这样既不很方便，也不高效，那么如何提高爬虫中这部分工作的效率呢？今天我给大家分享一个爬虫的利器，它就是：SelectorGadget 插件。
point and click CSS selectors，强大的谷歌插件 CSS生成器 ，有助于我们快速找到html的节点信息，它也支持Xpath表达式。Selector Gadget是一个开源的Chrome扩展程序，可以轻松地在复杂的网站上生成和选择CSS选择器。安装扩展程序后，转到任意页面并启动它。网站右下方会打开一个方框。 单击您希望选择器匹配的页面元素（它将变为绿色）。然后SelectorGadget将为该元素生成一个最小的CSS选择器，并突出显示（黄色）选择器匹配的所有内容。现在单击突出显示的元素将其从选择器中删除（红色），或单击未突出显示的元素将其添加到选择器。 通过这个选择和拒绝过程，SelectorGadget可以帮助您找到满足您需求的完美CSS选择器。
首先需要安装一下这个神器。在谷歌浏览器中的应用商店里，搜索到SelectorGadget插件，点击“添加至Chrome”即可。如果不能打开Chrome应用商店，可以通过网上的其他途径获取该插件，之后再手动添加至谷歌浏览器即可。手动添加方法是：打开谷歌浏览器扩展程序，并开启开发者模式，将该插件拖拽到浏览器里，如果不成功，可以选择“加载已解压的扩展程序”，将该文件夹先压缩再解压添加进去。
同时在页面栏上能看到红框处的SelectorGadget标志。
咱们以 https://www.yugaopian.cn/ 网页为例，首先点击网页上方的SelectorGadget，然后在网页下方弹出SelectorGadget框。接下来，咱们尝试一下如何使用？比如我们想定位“拆弹专家2”的节点，直接点击它，则会在框内显示其节点—— .item-title （如下图）。绿色：单击希望选择器匹配的页面元素。黄色：生成的这个CSS选择器【 .item-title 】能匹配的所有内容，从下图可以发现该CSS选择器可以抓取哪些信息。当你把鼠标放到这些高亮的元素上时，会显示红色，代表要将其从选择器中删除；而单击未突出显示的元素将其添加到选择器。
在实际构建CSS表达式过程中，需要搭配 网页开发工具 里的copy selector功能使用，非常方便。比如：定位抓取以下网页（ https://www.yugaopian.cn/allmovies ）红框内的所有电影名称信息。
具体操作流程如下：在某一电影名称下右击——检查，定位到电影名称的网页源码处，然后右击—copy—copy selector，再打开SelectorGadget，在框内粘贴CSS表达式，按Enter键，发现在网页中准确定位出该电影名称。但我们需要定位所有的电影名称，在已有的CSS表达式【（body >div:nth-child(5) >div.inner-wrapper >div.inner-2col-main >div >ul >li:nth-child(1) >a >span.item-title）】上进行修改，这里可以发现【li:nth-child(1)】只选取了第一个，而我们所需选取所有，因此去掉后面的【(1)】即可。在具体实践中，如何修改还有有赖于小伙伴对网页结构和CSS语法的理解。最终，获取以上红框内电影名称的CSS选择器表达式为：【body >div:nth-child(5) >div.inner-wrapper >div.inner-2col-main >div >ul >li:nth-child >a >span.item-title】。在实际应用中，不同节点标签之间用空格分隔：【body div:nth-child(5) div.inner-wrapper div.inner-2col-main div ul li:nth-child a span.item-title】。
但在SelectorGadget使用中，发现其构建的CSS表达式往往很复杂，大部分情况下其实也是可以自己构建CSS表达式的。构建CSS选择表达式的关键在于清楚整个网页结构，找到标签之间的属于关系、属性值属于哪个标签等，就可以比较快速的构建。而且浏览器很智能，鼠标在源码上的位置，可以在网页显示上呈现阴影，这个功能简直太香了。以上红框内所有电影名字的CSS表达式也可以表示为：【div.movlist ul li a span.item-title】
然后用SelectorGadget验证，如下图，发现高亮选中的部分就是我想要定位的信息，说明这个CSS表达式正确。
以上简单介绍了如何构建CSS表达式，在爬虫过程中定位抓取特定节点数据是非常重要的一步，有了这步才有下游的精准数据提取与清洗。希望本次教程能给有需要的小伙伴一点小小帮助！
更多内容可关注公共号“YJY技能修炼”~~~
往期回顾
R爬虫在工作中的一点妙用
R爬虫必备基础——HTML和CSS初识
R爬虫必备基础——静态网页+动态网页
R爬虫必备——rvest包的使用
