19 css 选择器用类名、节点名、id来获取节点内容

19 css 选择器用类名、节点名、id来获取节点内容

文章目录

1. 类选择器：bs对象.select(".父类名 .类名")

select[sɪˈlekt]:挑选。

格式语法：
bs对象.select(".父类名 .类名")
bs_duixiang.select(".panel .heading")

select是选取方法
.是类选择器
panel是heading类的父级
heading类名
2个类名之间有空格

# 声明一个字符串变量html_str 存储HTML代码
html_str='''
<html>
    <head><meta charset="utf-8"><title>安迪Python</title></head>
    <body>
        <div class="heading">
            <h4>2022年6月30日</h4>
        </div>
        <div class="panel">            
            <div class="heading">
                <h4>古诗2首</h4>
            </div>
            <div class="body">
                <ul class="list" id="list-1">
                    <li class="element">本是青灯不归客</li>
                    <li class="element">却因浊酒留风尘</li>
                    <li class="element">终是庄周梦了蝶</li>
                    <li class="element">你是恩赐也是劫</li>

                </ul>
                <ul class="list list-small" id="list-2">
                    <li class="element">知否？知否？</li>
                    <li class="element">应是绿肥红瘦</li>
                </ul>
            </div>
        </div>
    </body>
</html>
'''
# 1. 从bs4解析库导入BeautifulSoup类用于解析数据
from bs4 import BeautifulSoup

# 2.1 BeautifulSoup类（要解析的字符串，解析器）
# 2.2 传入要解析的字符串html_str和解析器lxml，实例化类得到一个BeautifulSoup对象 
bs_duixiang = BeautifulSoup(html_str, 'lxml')

print('''方法1：获取class="heading"的节点：''')

# select是选取方法
# `.`是类选择器
# heading类名
print(bs_duixiang.select(".heading"),'\n')

# select是选取方法
# `.`是类选择器
# panel是heading类的父级
# heading类名
# 2个类名之间有空格
print('''方法2：获取class="heading"且父级class="panel"的节点：''')
print(bs_duixiang.select(".panel .heading"))

【终端输出】

方法1：获取class="heading"的节点：
[<div class="heading">
<h4>2022年6月30日</h4>
</div>, <div class="heading">
<h4>古诗2首</h4>
</div>] 

方法2：获取class="heading"且父级class="panel"的节点：
[<div class="heading">
<h4>古诗2首</h4>
</div>]

bs_duixiang.select(".heading")得到的是所有class="heading"的节点，输出的结果有2个div节点。
bs_duixiang.select(".panel .heading")得到的是class="heading"且父级class="panel"的节点，输出结果只有一个div节点。

【温馨提示】
为了更精准的匹配我们需要的查找的内容，我们通常在要查找的类名前在家一个父级类名，注意两个类名之间有一个空格。
类名前的点是一个工具符号，表示类选择器。

【课堂练习】获取所有的li节点。
# 声明一个字符串变量html_str 存储HTML代码
html_str='''
<html>
    <head><meta charset="utf-8"><title>安迪Python</title></head>
    <body>
        <div class="heading">
            <h4>2022年6月30日</h4>
        </div>
        <div class="panel">            
            <div class="heading">
                <h4>古诗2首</h4>
            </div>
            <div class="body">
                <ul class="list" id="list-1">
                    <li class="element">本是青灯不归客</li>
                    <li class="element">却因浊酒留风尘</li>
                    <li class="element">终是庄周梦了蝶</li>
                    <li class="element">你是恩赐也是劫</li>

                </ul>
                <ul class="list list-small" id="list-2">
                    <li class="element">知否？知否？</li>
                    <li class="element">应是绿肥红瘦</li>
                </ul>
            </div>
        </div>
    </body>
</html>
'''
# 1. 从bs4解析库导入BeautifulSoup类用于解析数据
from bs4 import BeautifulSoup

# 2.1 BeautifulSoup类（要解析的字符串，解析器）
# 2.2 传入要解析的字符串html_str和解析器lxml，实例化类得到一个BeautifulSoup对象 
bs_duixiang = BeautifulSoup(html_str, 'lxml')

print("任务1：获取所有的li节点：")
# select是选取方法
# `.`是类选择器  
# list是element类的父级
# element类名
# 2个类名之间有空格
print(bs_duixiang.select(".list .element"),'\n')

print('''任务2：获取class="list list-small"的li节点：''')
print(bs_duixiang.select(".list-small .element"))

【终端输出】

任务1：获取所有的li节点：
[<li class="element">本是青灯不归客</li>, <li class="element">却因浊酒留风尘</li>, <li class="element">终是庄周梦了蝶</li>, <li class="element">你是恩赐也是劫</li>, <li class="element">知否？知否？</li>, <li class="element">应是绿肥红瘦</li>] 

任务2：获取class="list list-small"的li节点：
[<li class="element">知否？知否？</li>, <li class="element">应是绿肥红瘦</li>]

2. 节点选择器：bs对象.select("父节点名 节点名")

格式语法：
bs对象.select("父节点名 节点名")
bs_duixiang.select("ul li")

select是选取方法
ul节点是li节点的父节点。
2个节点之间有空格

【任务】获取所有的li节点。
# 声明一个字符串变量html_str 存储HTML代码
html_str='''
<html>
    <head><meta charset="utf-8"><title>安迪Python</title></head>
    <body>
        <div class="heading">
            <h4>2022年6月30日</h4>
        </div>
        <div class="panel">            
            <div class="heading">
                <h4>古诗2首</h4>
            </div>
            <div class="body">
                <ul class="list" id="list-1">
                    <li class="element">本是青灯不归客</li>
                    <li class="element">却因浊酒留风尘</li>
                    <li class="element">终是庄周梦了蝶</li>
                    <li class="element">你是恩赐也是劫</li>

                </ul>
                <ul class="list list-small" id="list-2">
                    <li class="element">知否？知否？</li>
                    <li class="element">应是绿肥红瘦</li>
                </ul>
            </div>
        </div>
    </body>
</html>
'''
# 1. 从bs4解析库导入BeautifulSoup类用于解析数据
from bs4 import BeautifulSoup

# 2.1 BeautifulSoup类（要解析的字符串，解析器）
# 2.2 传入要解析的字符串html_str和解析器lxml，实例化类得到一个BeautifulSoup对象 
bs_duixiang = BeautifulSoup(html_str, 'lxml')

print("节点选择器：获取所有的li节点：")
# select是选取方法        
# ul节点是li节点的父节点。           
# 2个节点之间有空格   
print(bs_duixiang.select("ul li"))

【终端输出】

节点选择器：获取所有的li节点：
[<li class="element">本是青灯不归客</li>, <li class="element">却因浊酒留风尘</li>, <li class="element">终是庄周梦了蝶</li>, <li class="element">你是恩赐也是劫</li>, <li class="element">知否？知否？</li>, <li class="element">应是绿肥红瘦</li>]

运行代码后返回一个列表，里面含有5个li。

3. id选择器：bs对象.select("#id 节点名")

格式语法：
bs对象.select("#id 节点名")
bs_duixiang.select("#list-2 li")

select是选取方法
#是id选择器
list-2是id名
li节点名

【任务】获取第2个ul节点即其所有的li节点。

代码中有2个ul节点，2个节点的区别是：id不同。
第1个ul节点的id=“list-1”
第2个ul节点的id=“list-2”

# 声明一个字符串变量html_str 存储HTML代码
html_str='''
<html>
    <head><meta charset="utf-8"><title>安迪Python</title></head>
    <body>
        <div class="heading">
            <h4>2022年6月30日</h4>
        </div>
        <div class="panel">            
            <div class="heading">
                <h4>古诗2首</h4>
            </div>
            <div class="body">
                <ul class="list" id="list-1">
                    <li class="element">本是青灯不归客</li>
                    <li class="element">却因浊酒留风尘</li>
                    <li class="element">终是庄周梦了蝶</li>
                    <li class="element">你是恩赐也是劫</li>

                </ul>
                <ul class="list list-small" id="list-2">
                    <li class="element">知否？知否？</li>
                    <li class="element">应是绿肥红瘦</li>
                </ul>
            </div>
        </div>
    </body>
</html>
'''
# 1. 从bs4解析库导入BeautifulSoup类用于解析数据
from bs4 import BeautifulSoup

# 2.1 BeautifulSoup类（要解析的字符串，解析器）
# 2.2 传入要解析的字符串html_str和解析器lxml，实例化类得到一个BeautifulSoup对象 
bs_duixiang = BeautifulSoup(html_str, 'lxml')

print("步骤1：用id选择器获取第2个ul节点：")
# select是选取方法
# `#`id选择器
# list-2是第2个ul的id属性
print(bs_duixiang.select("#list-2"),'\n')

print("步骤1：用id选择器获取第2个ul节点的li节点：")
print(bs_duixiang.select("#list-2 li"))

【终端输出】

步骤1：用id选择器获取第2个ul节点：
[<ul class="list list-small" id="list-2">
<li class="element">知否？知否？</li>
<li class="element">应是绿肥红瘦</li>
</ul>] 

步骤1：用id选择器获取第2个ul节点的li节点：
[<li class="element">知否？知否？</li>, <li class="element">应是绿肥红瘦</li>]

4. 总结

在这里插入图片描述

版权声明：本文为weixin_63986098原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。