CSS选择器及应用

凯之~

已于 2022-04-25 23:40:30 修改

阅读量521

点赞数

分类专栏：基于爬虫的知识点总结文章标签： css

于 2022-04-11 22:31:10 首次发布

本文链接：https://blog.csdn.net/weixin_47447179/article/details/124053579

版权

CSS选择器 PyQuery HTML解析网页抓取标签定位

关键词由CSDN通过智能技术生成

基于爬虫的知识点总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简介

CSS(Cascading Style Sheets)，即层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。作用是能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
简而言之，就是一种用于设置网页样式的语言。

语法

通过CSS来设置网页样式有以下三种方法：
1.通过style属性编写样式。示例如下：

<div style="width: 100px;height: 100px;border: 1px solid red;">你好，蓝白社社员凯之</div>

style属性中，冒号":“前为属性，后为具体值。不同属性通过分号";”相隔。

2.通过style标签编写样式，并以选择器形式选择标签。示例如下：

<!--style标签内容代表当前页面可以使用的样式效果，下面向span标签添加样式-->
<style>
	span{
		color:pink;
	}
</style>
<!--编写一个span标签-->
<span>口袋妖怪漆黑的魅影</span>

3.在CSS文件中编写样式，并通过link引入。示例如下：
在CSS文件写入以下代码以设置div标签样式：

div{
    color: aqua;
}

之后，在html文件中通过link引入：

<!--其中，href中的内容是对应的css文件名，其它不变-->
<link rel="stylesheet" href="mycss.css">
<!--引入css文件后，会根据其中的代码设置样式（相当于将其直接写在html文件里面）-->

CSS语言可直接在html文件编写，如上述的1、2点。

学习目的

利用选择器选择页面上的标签。

类别

以下类别选择器除非特殊说明，否则示例基于下面的html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <ul>
        <li>蓝牧</li>
        <span>白歌</span>
        <li>墨穷</li>
        <span>黄极</span>
    </ul>
    
    <ol>
        <li>小火龙</li>
        <span>妙蛙种子</span>
        <li>杰尼龟</li>
        <span>水跃鱼</span>
    </ol>

</body>
</html>

id选择器：#

选择具有某个id的标签设置样式。
例如为第一个标签蓝牧添加id：

<li id="LifeBall">蓝牧</li>

在style标签中通过#选择蓝牧的id并设置其样式：

#LifeBall{
	color: blue;
}

标签选择器：标签

选择所有对应标签设置样式。
例如为所有的li标签设置样式：

li{
	color: red;
}

类选择器：.

类似id选择器，选择具有某个类的标签设置样式。
例如为前两个标签添加类：

	<li class="Founder">蓝牧</li>
	<span class="Founder">白歌</span>

在style标签中通过.选择相应的类并设置样式：

.Founder{
	color: aqua;
}

选择器分组：,

通过,为不同标签设置同一个样式。
例如为li和span标签同时设置样式：

li,span{
	color: red;
}

后代选择器：空格

通过" "将标签与其子标签隔开，以设置该标签的子标签样式（包括子标签中的子标签……）。
例如只为<ul>中的<li>标签，即蓝牧和墨穷设置样式，而不为<ol>中的<li>标签，即小火龙和杰尼龟设置样式：

ul li{
	color: red;
}

子选择器：>

与后代选择器类似，但只设置子标签，不设置子标签的子标签……（其实从“后代”和“子”的区别就可以区分）。
例如只为ul标签中的子标签设置样式：

ul>li{
	color: red;
}

这里的效果和后代选择器一致，因为蓝牧和墨穷没有子标签

相邻选择器：+

选择相邻的标签并设置后面标签的样式。
例如对span和li相邻（注意顺序）的li进行样式设置，通过以下的代码，可以仅对墨穷和杰尼龟设置样式：

span+li{
	color: red;
}

属性选择器：[属性]

类似类选择器，选择具有某个属性的标签进行样式设置（可以通过[属性=值]找到具体某个值的属性的标签）。
例如为墨穷和小火龙添加属性：

	<li content="Must_hit">墨穷</li>
	<li content="FireSys">小火龙</li>

在style标签中通过[content]选择相应的类并设置样式。
也可以通过[content=“Must_hit”]单独选择墨穷：

li[content]{
	color: aqua;
}

应用

前面的内容只是在代码里面选择代码中的某些标签并添加相应的样式，下面将通过pyquery模块使用CSS选择器选出需要的内容。

pyquery模块安装

以PyCharm为例，在终端输入pip install pyquery即可安装该模块，挺小的。

在需要应用的文件通过代码from pyquery import PyQuery进行引用。

示例

下面通过注释进行解释：

# 处理的html文本
html = """
    <ol>
        <li class="huo"><a href="xhl">小火龙</a></li>
        <li class="cao"><a href="mwzz">妙蛙种子</a></li>
        <li class="sui" id="2314"><a href="jng">杰尼龟</a></li>
        <li class="sui"><a href="syy">水跃鱼</a></li>
    </ol>
"""
# 首先，初始化
p = PyQuery(html)   # 此时，p是pyquery类型

a = p("a")       # 取出其中含a标签的标签（此时仍然是pyquery类型）
a = p(".sui")    # 取出其中类为sui的标签，.表示类选择器
a = p(".sui a")  #  取出其中类为sui的标签的a子标签，空格表示后代选择器
a = p("#2314")   #  取出其中id为2314的标签，#表示id选择器
a = p("#2314 a").attr("href")  # 取出其中id为2314的标签的a子标签的href属性值，attr("属性")：获取某个属性的值
a = p("#2314 a").text()        # 获取对应文本
a = p("#2314 a").html()        #获取a标签内所有文本，与上面不同的是，这个会拿代码，上面只拿文本
print(a)

# 取出多个标签的某个属性
items = p("li a").items()   # 返回值是一个generator生成器（迭代器）
for item in items:
    href = item.attr("href")
    print(name,href)

# 修改html的结构
p("li.huo").after("""<li class="cao"><a href="yts">叶藤蛇</a></li>""")  # after：在某个选择了的标签后面添加标签
p("li.huo").append("""<span>叶藤蛇</span>""")  # append：在某个选择了的标签中添加标签
p("li.huo").attr("class", "huo_feixin")       # 修改属性(添加也一样)
p("li.huo").remove_attr("class")              # 删除属性
p("li.huo").remove()                          # 删除标签
print(p)