4-selenium-CSS表达式

最新推荐文章于 2024-07-19 19:45:11 发布

我要糖

最新推荐文章于 2024-07-19 19:45:11 发布

阅读量568

点赞数

分类专栏： selenium 文章标签： css selenium

本文链接：https://blog.youkuaiyun.com/qq_44790423/article/details/115954537

版权

selenium 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了CSS选择元素的各种方法，包括根据tag名、id、class选择，子元素与后代元素的区别，属性选择，组合选择，以及特定位置和兄弟关系的选择。适合深入理解CSS选代器的开发者阅读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 选择元素原理

HTML中经常要为某些元素指定显示效果，比如前景文字颜色是红色，背景颜色是黑色，字体是微软雅黑等。

那么CSS必须告诉浏览器：要选择哪些元素，来使用这样的显示风格。

# 通过 CSS Selector 选择单个元素的方法是
find_element_by_css_selector(CSS Selector参数)

# 选择所有元素的方法是
find_elements_by_css_selector(CSS Selector参数)

根据 tag 名、id、class 选择元素

elements = wd.find_elements_by_css_selector('div')

#等价于

elements = wd.find_elements_by_tag_name('div')

id 属性

假如有这样的元素

<input  type="text" id='searchtext' />

就可以通过 #searchtext 来选择它

比如，在 id 为 searchtest 的输入框中输入 你好

from selenium import webdriver

wd = webdriver.Chrome(r'd:\webdrivers\chromedriver.exe')

wd.get('http://cdn1.python3.vip/files/selenium/sample1.html')

element = wd.find_element_by_css_selector('#searchtext')
element.send_keys('你好')

class 属性

选择语法为在class前面加 .

elements = wd.find_elements_by_class_name('animal')

#等价

elements = wd.find_elements_by_css_selector('.animal')

选择子元素和后代元素

这里要注意直接子元素和后代元素的基本概念，

如果是直接包含，中间没有其他层次，那么就是直接子元素；

如果是包含关系，那就是后代元素。

直接子元素

如果元素2是元素1的直接子元素

元素1 > 元素2

同时也支持更多层次

元素1 > 元素2 > 元素3 > 元素4

选择元素1 里面的子元素元素2 里面的子元素元素3 里面的子元素元素4，最终选择的是元素4

后代元素

空格隔开
元素 2 是元素 1 的后代元素

元素1   元素2

同样支持多层次选择，最终选择元素4

元素1   元素2   元素3  元素4

根据属性选择

id class 这些都算是属性，所以会有根据 id class 来进行选择。

比如

<a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>

如果要找到上面的 a 元素，就可以这样子写

element = wd.find_element_by_css_selector('[href="http://www.miitbeian.gov.cn"]')

意思就是选择属性 href 值为 http://www.miitbeian.gov.cn 的元素。

包含关系的属性值

CSS 还可以选择属性值包含某个字符串的元素。

a[href*="miitbeian"]

属性值以某字符串开头的元素

a[href^="http"]

属性值以某字符串结尾的元素

a[href$="gov.cn"]

其实所有的这些可以直接打开网页，在 element 部分进行 Ctrl+F 即可

选择语法联合使用

比如这样一段代码

<div id='bottom'>
    <div class='footer1'>
        <span class='copyright'>版权</span>
        <span class='date'>发布日期：2018-03-03</span>
    </div>
    <div class='footer2'>
        <span>备案号
            <a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>
        </span>
    </div>        
</div>

如果我们的表达式这样子写

div.footer1 > span.copyright

就是选择一个class 属性值为 copyright 的 span 节点，并且要求其必须是 class 属性值为 footer1 的 div节点的子节点

更简单的表达就是

.footer1 > .copyright

也可以这样子写

.footer1  .copyright

组选择

逗号可以用来同时选择两个元素（同属性）

比如同时选择 class 为 plant 和 animal 的元素

.plant , .animal

再比如同时选择所有tag名为div的元素和 id为BYHY的元素，就可以像这样写

div,#BYHY

对应的代码是

elements = wd.find_elements_by_css_selector('div,#BYHY')
for element in elements:
    print(element.text)

假如我们有这样一段代码

<div id="t1">
    <h3> 唐诗 </h3>
    <span>李白</span>
    <p>静夜思</p>
    <span>杜甫</span>
    <p>春夜喜雨</p>  
     
</div>      

<div id="t2">
    <h3> 宋词 </h3>
    <span>辛弃疾</span>
    <p>北固亭怀古</p>
     
</div>

我们要选择所有唐诗里面的作者和诗名，也就是选择所有 id 为 t1 里面的 span 和 p 元素

一般我们会这样子写

#t1 > span,p

这样写是不行的，因为运算符优先级，所以这段代码会解读为 t1 里的 span 标签和 p 标签（ t2 中的北固亭怀古会被找出来）

所以应该这样子写

#t1 > span , #t1 > p

按次序选择子节点

假如有这样一段信息

<div id='t1'>
    <h3> 唐诗 </h3>
    <span>李白</span>
    <p>静夜思</p>
    <span>杜甫</span>
    <p>春夜喜雨</p>              
</div>      
 
<div id='t2'>
    <h3> 宋词 </h3>
    <span>苏轼</span>
    <p>赤壁怀古</p>
    <p>明月几时有</p>
    <p>江城子·乙卯正月二十日夜记梦</p>
    <p>蝶恋花·春景</p>
    <span>辛弃疾</span>
    <p>京口北固亭怀古</p>
    <p>青玉案·元夕</p>
    <p>西江月·夜行黄沙道中</p>
</div>