CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。
顾名思义css选择器定位和选择的是HTML抽象DOM树上的一个或一类元素。
- css选择器
- 前言
- 一、CSS选择器的概念
- 标签选择器
- id选择器
- 类选择器
- 属性选择器
- 二、选择器的嵌套
- 复合选择器
- 伪类,伪元素
- 三、实践
- 四、总结
写爬虫的我们为什么要学习CSS选择器?
CSS选择器除了是CSS语言最为核心的部分。
更重要的事CSS选择器是一个索引的思路。而这个思路我们在爬虫定位目标的时候常常用的到!
提示:以下是本篇文章正文内容,下面案例可供参考
标签选择器
id选择器
class选择器(类选择器)
复合选择器
伪类
标签选择器
这里的标签指的是HTML的标签。 有一百多个呢。。。但是常见的不超过十个。 和爬虫关系最紧密的,也就a,link,p这么常见的几个。
hello world
// 对应的选择器就是p
p {
text-align: center;
color: red;
}
id选择器
这是最直接的选择器,一对一的。同一个页面只能有一个id,不能重复。
#标识符后面的字符串就是id选择器
hello world
// 对应的选择器就是p
#first {
text-align: center;
color: red;
}
类选择器
最常用的选择器,往往是多选。标识符是.
想实现什么效果,就加入什么效果的class。相当于插拔式的样式。
This heading will be center-aligned
This paragraph will also be center-aligned.
.center {text-align: center}
这也是对于爬虫而言最重要的。
同一类元素往往有着相同的格式!!!CSS实现的方法就是通过class相互区别。
所以,爬虫也可以做按照这个思路,索引同一类的元素,一次性抓取。
属性选择器
一般用来缩小范围 还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。
disney.com
wikipedia.org
//全部
a[target] {
background-color: yellow;
}
//第一个
a[target="_blank"] {
background-color: yellow;
}
属性选择器也支持一些匹配语法的。。。但是具体的语法对我们写爬虫不重要。
只需要知道属性也可以帮助我们做定位。
二、选择器的嵌套
复合选择器
CSS 选择器可以包含多个简单选择器。在简单选择器之间,我们可以包含一个组合器。
CSS 中有四种不同的组合器:
后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)
并列(,)
通过这四个和基础的选择器组合成为复杂的选择器。
我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用
我是斜体字。这是因为 strong 元素位于 li 元素内。
我是正常的字体。
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,推敲一下,是不是需要的。
选择器的核心在于如何快速的实现唯一性!!!
下一讲,应该是一个系列化的实战项目。一边实践,一边引入新的内容。 我看了一下这几篇文章。。。有点让人打瞌睡啊