css选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

顾名思义css选择器定位和选择的是HTML抽象DOM树上的一个或一类元素。

文章目录

css选择器
前言
一、CSS选择器的概念
- 标签选择器
- id选择器
- 类选择器
- 属性选择器
二、选择器的嵌套
- 复合选择器
- 伪类，伪元素
三、实践
四、总结

前言

写爬虫的我们为什么要学习CSS选择器？

CSS选择器除了是CSS语言最为核心的部分。

更重要的事CSS选择器是一个索引的思路。而这个思路我们在爬虫定位目标的时候常常用的到！

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS选择器的概念

 标签选择器id选择器class选择器（类选择器）复合选择器伪类

标签选择器

这里的标签指的是HTML的标签。
有一百多个呢。。。但是常见的不超过十个。
和爬虫关系最紧密的，也就a，link，p这么常见的几个。

<p>hello world<\p>//　对应的选择器就是p
p {text-align: center;color: red;
}

id选择器

这是最直接的选择器，一对一的。同一个页面只能有一个id，不能重复。

#标识符后面的字符串就是id选择器

<p id="first">hello world<\p>//　对应的选择器就是p
#first {text-align: center;color: red;
}

类选择器

最常用的选择器，往往是多选。标识符是.
想实现什么效果，就加入什么效果的class。相当于插拔式的样式。

<h1 class="center">
This heading will be center-aligned
</h1><p class="center">
This paragraph will also be center-aligned.
</p>

.center {text-align: center}

这也是对于爬虫而言最重要的。

同一类元素往往有着相同的格式！！！CSS实现的方法就是通过class相互区别。
所以，爬虫也可以做按照这个思路，索引同一类的元素，一次性抓取。

属性选择器

一般用来缩小范围
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。

<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

//全部
a[target] {background-color: yellow;
}
//第一个
a[target="_blank"] { background-color: yellow;
}

属性选择器也支持一些匹配语法的。。。但是具体的语法对我们写爬虫不重要。
只需要知道属性也可以帮助我们做定位。

二、选择器的嵌套

复合选择器

CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)
并列（,）

通过这四个和基础的选择器组合成为复杂的选择器。

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p><ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

li strong {font-style: italic;font-weight: normal;}

后代选择器是指节点下面的全部后代。子节点的选择器，只是当前节点的孩子，不会发生递归。

伪类，伪元素

对于爬虫而言意义不大，可忽略

 伪类，伪元素并不是随意的。相反高度固定。比如以下的例子。他们都是为了实现一些固定的常用的抽象功能而存在的。用法也极为固定。所以无需理解，也能使用。

代码如下（示例）：

/* 未访问的链接 */
a:link {color: #FF0000;
}/* 已访问的链接 */
a:visited {color: #00FF00;
}/* 鼠标悬停链接 */
a:hover {color: #FF00FF;
}/* 已选择的链接 */
a:active {color: #0000FF;
}

详情见
w3school

相当于固定反应的特殊的标签tag。

三、实践

我们用百度简单说一下。
用什么选择器无所谓，怎么做选择也无所谓。
但是尽量快速逼近目标很重要，因为那样代码不就少一点了嘛。

其实我，看到这图片是唯一的还是比较期待有个id让我用用的。
结果失望没有。如果不是我们需要的，那就再加几个属性。

map area[style="outline:none"]

这样应该就可以了。

四、总结

效率由低到高

id选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
相邻选择器（h1+p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel=“external”]）
伪类选择器（a:hover,li:nth-child）

对于爬虫而言，类选择器，标签选择器，属性选择器，后代选择器
用的比较多。

如果不知道怎么写。。。怎么办看看CSS里面人家怎么写的。
浏览器选中元素之后，就会看到对应的CSS，推敲一下，是不是需要的。

选择器的核心在于如何快速的实现唯一性！！！

下一讲，应该是一个系列化的实战项目。一边实践，一边引入新的内容。
我看了一下这几篇文章。。。有点让人打瞌睡啊

Python爬虫(5)css选择器相关推荐

网络爬虫之css选择器
文章目录通过id,class选择元素元素内部筛选通过属性值筛选取值参考通过id,class选择元素 #container 选择id为container的元素 .container 选择所有 ...
CSS 选择器参考手册
2019独角兽企业重金招聘Python工程师标准>>> CSS 选择器参考手册选择器描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] ...
Python爬虫实例（3）--BeautifulSoup的CSS选择器
Python爬虫实例紧接着上一讲的内容. 我们初步了解了bs4这个解析库. 但是bs4难道只有find,find_all了吗? 如果层次比较深,相似的元素比较多,和可能会写的比较长. 最主要的是很难 ...
python爬虫：scrapy框架xpath和css选择器语法
Xpath基本语法一.常用的路径表达式: 表达式描述实例 nodename 选取nodename节点的所有子节点 //div / 从根节点选取 /div // 选取所有的节点,不考虑他们的位置 ...
Python学习，还在用正则或者bs4做爬虫吗？来试试css选择器吧
之前写的一些爬虫都是用的正则.bs4.xpath做为解析库来实现,如果你对web有所涉及,并且比较喜欢css选择器,那么就有一个更适合的解析库-- PyQuery.我们就用一个非常简单的小例子来看看c ...
【Python爬虫】用CSS 选择器提取网页数据
使用 pip 安装 requests_html 库 pip install requests_html 根据你的网络情况,通常需要几分钟时间. 在你的电脑任意位置,新建一个 crawler.py 文件 ...
python爬虫哪个选择器好用_Python网络爬虫四大选择器用法原理总结
前几天小编连续写了四篇关于Python选择器的文章,分别用正则表达式.BeautifulSoup.Xpath.CSS选择器分别抓取京东网的商品信息.今天小编来给大家总结一下这四个选择器,让大家更加深刻 ...
Python爬虫扩展库scrapy选择器用法入门（一）
关于BeutifulSoup4的用法入门请参考Python爬虫扩展库BeautifulSoup4用法精要,scrapy爬虫案例请参考Python使用Scrapy爬虫框架爬取天涯社区小说"大宗 ...
Python爬虫 --- 2.2 Scrapy 选择器的介绍
原文链接:www.fkomm.cn/article/201- 在使用Scrapy框架之前,我们必须先了解它是如何筛选数据的 Scrapy提取数据有自己的一套机制,被称作选择器(selectors),通 ...

Python爬虫(5)css选择器