今天要对CSS选择器的使用方法做一个全面的总结(几乎全部是从这篇文章摘抄的 https://blog.csdn.net/qq_39241986/article/details/82185697

CSS选择器常用类型

常用的5大CSS选择器:
# 1.元素选择器:又称为标签选择器,根据标签名来固定样式作用范围。
eg.对页面所有p标签样式限定:
p{
font-size:12px; # 字体大小
background:#900; # 背景颜色
} # 2.类选择器:即根据元素(标签)的class属性来固定样式作用范围。(class不是唯一的)
eg.设置class为demoDiv的div块颜色
.demoDiv{color:#FF0000;} # 3.ID选择器:即根据元素(标签)的id属性来固定样式作用范围。(ID是唯一的)
eg.设置id为demoDiv的div块颜色
#demoDiv{color:#FF0000; } # 4.后代选择器:又称为包含选择器,用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开。
eg.设置id为links的后代中标签a为红色
#links a {color:red;} # 5.子选择器:子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一个后代,通过“>”进行选择。
eg.设置id为links的后代中第一个a标签为蓝色
#links > a {color:blue;}
当然还有很多css选择器,比如伪类选择器、通用选择器、群组选择器等,我就不赘述了,大家要用百度谷歌
一下就可以了嘿嘿。

举例练习,爬取 http://python.jobbole.com/89196/ 网页的内容

# -*- coding: utf-8 -*-
import scrapy
import re class JobboleSpider(scrapy.Spider):
name = 'jobbole'
allowed_domains = ['blog.jobbole.com']
start_urls = ['http://python.jobbole.com/89196/'] def parse(self, response):
# CSS选择器实战
# 文章标题
title = response.css(".entry-header h1 ::text").extract()[0]
# 发布日期
data_r = response.css(".entry-meta-hide-on-mobile::text").extract()[0].strip()
data_time = data_r.replace('·','').strip()
# 文章分类
type_01 = response.css(".entry-meta-hide-on-mobile > a:nth-child(1)::text").extract()[0]
type_02 = response.css(".entry-meta-hide-on-mobile > a:nth-child(2)::text").extract()[0]
article_type = type_01 + "·" + type_02 # 文章简介
summary = response.css(".entry > blockquote:nth-child(2) > p:nth-child(1)::text").extract()[0]
# 点赞数
praise_number = int( response.css("#89196votetotal::text").extract()[0])
# 收藏数
collection_str = response.css("span.btn-bluet-bigger:nth-child(2)::text").extract()[0]
reg_02 = '.*?(\d+).*'
collection_number = int(re.findall(reg_02,collection_str)[0]) print("文章标题:"+title)
print("发布日期:"+data_time)
print("文章分类:"+article_type)
print("文章简介:"+summary)
print("点赞数:"+str(praise_number))
print("收藏数:"+str(collection_number))
>>> response.css(".entry-header h1").extract()
['<h1>爬虫进阶:反反爬虫技巧</h1>']

我们发现文章标题并没被完全取出,还是被h1标签包裹着,有两种方法获取文字: 
方法一:正则表达式获取(麻烦)

>>> title = response.css(".entry-header h1").extract()[0]
>>> reg_01 = "<h1>(.*?)</h1>"
>>> title = re.findall(reg_01,title)[0]
>>> title
'爬虫进阶:反反爬虫技巧'

方法二:伪类选择器(简单)

>>> title = response.css(".entry-header h1 ::text").extract()[0]
>>> title
'爬虫进阶:反反爬虫技巧’

获取文章发布时间

'''
预备小知识:
1.str.strip():可以去除str里左右两端的空格和\n,\r。
2.str.replace("a","b"):将str里所有的a由b代替。
'''
# 文章发布时间
>>> data_r = response.css(".entry-meta-hide-on-mobile::text").extract()[0]
>>> data_r
'\r\n\r\n 2018/06/28 · '
>>> data_r = data_r.strip()
>>> data_r
'2018/06/28 ·'
>>> data_time = data_r.replace('·','').strip()
>>> data_time
'2018/06/28'

获取文章点赞数、收藏数、评论数

# 点赞数:h10下id为89196votetotal,因为页面内该id值唯一,故可以直接用id选择器
>>> response.css("#89196votetotal::text").extract()[0]
'' # praise_number = int(response.css("#89196votetotal::text").extract()[0]) # 收藏数:a:nth-child(2)表示选取a标签的第二个元素
>>> response.css("span.btn-bluet-bigger:nth-child(2)::text").extract()[0]
' 6 收藏'
>>> import re
>>> reg_02 = '.*(\d+).*'
>>> collection_str = response.css("span.btn-bluet-bigger:nth-child(2)::text").extract()[0]
>>> re.findall(reg_02,collection_str)[0]
''
或用collection_str = collection_str[0:3].strip() # collection_str = response.css("span.btn-bluet-bigger:nth-child(2)::text").extract()[0]
# reg_02 = '.*(\d+).*'
# collection_number = int(re.findall(reg_02,collection_str)[0]) # 评论数:X先生这次选择的又是没有评论的,可谓良苦用心,只为了让大家自己多动动脑袋,多想想,
# 哈哈哈
>>> response.css("span.hide-on-480::text").extract()[0]
' 评论'
# 如果有评论的话,和收藏数一样,用正则表达式匹配数字即可,自己找篇有评论的试试吧~

文章简介

>>> response.css(".entry > blockquote:nth-child(2) > p:nth-child(1)::text").extract()[0]
'主要针对以下四种反爬技术:Useragent过滤;模糊的Javascript重定向;验证码;请求头一致性检查。'

文章分类

>>> response.css(".entry-meta-hide-on-mobile > a:nth-child(1)::text").extract()[0]
'实践项目'
>>> response.css(".entry-meta-hide-on-mobile > a:nth-child(2)::text").extract()[0]
'爬虫'

CSS选择器使用的更多相关文章

  1. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  2. css选择器

    常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...

  3. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  4. CSS选择器的权重与优先规则?

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

  5. css选择器的使用详解

    -.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选 ...

  6. js,jq,css选择器

    js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...

  7. CSS系列:CSS选择器

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...

  8. 细说CSS选择器

    众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...

  9. CSS选择器 转

    来自于:http://www.cnblogs.com/webblog/archive/2009/08/07/1541005.html 最近在研究jQuery的选择器,大家知道jQuery的选择器和cs ...

  10. HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

随机推荐

  1. Java实现 LeetCode 33 搜索旋转排序数组

    33. 搜索旋转排序数组 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给定的目标值, ...

  2. SQL Server账号密码(sa)登录失败 错误原因:18456

    (其实以前经常用的时候,都很简单,最近一段时间不用了,再一看发现都忘记的差不多了,还是写一篇博客吧,防止下一次再在这种问题上面浪费时间) 使用window登录 打开属性 打开安全性 选择SQL ser ...

  3. java实现蓝桥杯密码脱落

    一 问题描述 X星球的考古学家发现了一批古代留下来的密码. 这些密码是由A.B.C.D 四种植物的种子串成的序列. 仔细分析发现,这些密码串当初应该是前后对称的(也就是我们说的镜像串). 由于年代久远 ...

  4. java实现第六届蓝桥杯奇怪的数列

    奇怪的数列 从X星截获一份电码,是一些数字,如下: 13 1113 3113 132113 1113122113 - YY博士经彻夜研究,发现了规律: 第一行的数字随便是什么,以后每一行都是对上一行& ...

  5. 性能测试之 JVM 概念认识

    无论什么语言,在程序运行过程中,都需要对内存进行管理,要知道计算机/服务器的内存不是无限的.例如:C语言中需要对对象的内存负责,需要用delete/free来释放对象:那JAVA中,对象的内存管理是由 ...

  6. CentOS7搭建Pacemaker高可用集群(1)

    Pacemaker是Red Hat High Availability Add-on的一部分.在RHEL上进行试用的最简单方法是从Scientific Linux 或CentOS存储库中进行安装 环境 ...

  7. WPF 学习(一)

    一.WPF介绍 WPF全称 Windows Presentation Foundation,干啥用的? 主要是用来制作Windows桌面客户端软件的. .Net平台下制作Windows桌面客户端软件主 ...

  8. 基于Azure IoT开发.NET物联网应用系列-全新的Azure IoT架构

    物联网技术已经火了很多年了,业界各大厂商都有各自成熟的解决方案.我们公司主要搞新能源汽车充电,充电桩就是物联网技术的最大应用,车联网.物联网.互联网三网合一.2017年的时候重点研究过Azure Io ...

  9. [C#.NET 拾遗补漏]04:你必须知道的反射

    阅读本文大概需要 3 分钟. 通常,反射用于动态获取对象的类型.属性和方法等信息.今天带你玩转反射,来汇总一下反射的各种常见操作,捡漏看看有没有你不知道的. 获取类型的成员 Type 类的 GetMe ...

  10. HDU - 2639 Bone Collector II 题解

    题目大意 一个人收藏骨头,有 n 个骨头,每个骨头有体积和价值,问能够装在容量为 V 的背包中,能获得的第 k 大(去重后)价值是多少. 样例 样例输入 1 5 10 2 1 2 3 4 5 5 4 ...