css表达式-下篇

选择语法联合使用

CSS selector的另一个强大之处在于: 选择语法 可以 联合使用

比如, 我们要选择 下面的 html 中的元素 <span class='copyright'>版权</span>

<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>         

CSS selector 表达式 可以这样写:

div.footer > span.copyright

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


也可以更简单:

.footer > .copyright

就是 选择 一个class 属性值为copyright 的节点(不限类型), 并且要求其 必须是 class 属性值为 footer 的节点的 子节点


当然 这样也是可以的:

.footer  .copyright

因为子元素同时也是后代元素


多表达式选择

同时选择所有div元素id为BYHY的元素, 使用逗号

div,#BYHY{color:red;font-size:20px;background-color:yellow;}
elements = wd.find_elements_by_css_selector('div,#BYHY')
for element in elements:
    print(element.text)

注意:元素标签之间为逗号隔开

相邻兄弟选择

选择h4元素之后紧跟的a元素

h4+a{color:red;font-size:20px;background-color:yellow;}
elements = wd.find_elements_by_css_selector('h4+a')
for element in elements:
    print(element.text)

注意:元素标签之间为加号连接

后续兄弟选择

选择h4元素之后所有兄弟关系的a元素,即选择所有具有相同的父元素中在h4元素之后的所有a元素

h4~a{color:red;font-size:20px;background-color:yellow;}
elements = wd.find_elements_by_css_selector('h4~a')
for element in elements:
    print(element.text)

注意:元素标签之间为波浪线连接

否定选择

选择所有a标签中ID不是BYHY的元素

a:not(#BYHY){color:red;font-size:20px;background-color:yellow;}
elements = wd.find_elements_by_css_selector('a:not(#BYHY)')
for element in elements:
    print(element.text)

子节点选择1

first-child

选择属于其父元素的首个子元素为P的所有P元素

p:first-child{color:red;font-size:20px;background-color:yellow;}
elements = wd.find_elements_by_css_selector('p:first-child')
for element in elements:
    print(element.text)

last-child

选择属于其父元素的最后一个子元素为P的每个p元素

p:last-child{color:red;font-size:20px;background-color:yellow;}
elements = wd.find_elements_by_css_selector('p:last-child')
for element in elements:
    print(element.text)

only-child

选其父元素的只有唯一一个子元素且元素为P的每个 p 元素

p:only-child{color:red;font-size:20px;background-color:yellow;}
elements = wd.find_elements_by_css_selector('p:only-child')
for element in elements:
    print(element.text)

nth-child(n)

选择属于其父元素的第二个子元素为P元素的每个P元素

p:nth-child(2){color:red;font-size:20px;background-color:yellow;}
elements = wd.find_elements_by_css_selector('p:nth-child(2)')
for element in elements:
    print(element.text)

nth-child(even)

选择属于其父元素的序数为偶数(even)的子元素为P元素的每个P元素

p:nth-child(even){color:red;font-size:20px;background-color:yellow;}
elements = wd.find_elements_by_css_selector('p:nth-child(even)')
for element in elements:
    print(element.text)

选择属于其父元素的序数为序数为奇数(odd)的子元素为P元素的每个P元素

p:nth-child(odd){color:red;font-size:20px;background-color:yellow;}
elements = wd.find_elements_by_css_selector('p:nth-child(odd)')
for element in elements:
    print(element.text)

nth-last-child(n)

选择属于其父元素的倒数第二个子元素为P元素的所有P元素

p:nth-last-child(2){color:red;font-size:20px;background-color:yellow;}
elements = wd.find_elements_by_css_selector('p:nth-last-child(2)')
for element in elements:
    print(element.text)

子节点选择2

first-of-type

选择属于其父元素的第一个为P元素的所有P元素

p:first-of-type{color:red;font-size:20px;background-color:yellow;}
elements = wd.find_elements_by_css_selector('p:first-of-type')
for element in elements:
    print(element.text)

last-of-type

选择属于其父元素的最后一个为P元素的所有P元素

p:last-of-type{color:red;font-size:20px;background-color:yellow;}
elements = wd.find_elements_by_css_selector('p:last-of-type')
for element in elements:
    print(element.text)

only-of-type

选其父元素只有唯一一个元素且元素为P的每个p元素,如果有多个也不会被选中

p:only-of-type{color:red;font-size:20px;background-color:yellow;}
elements = wd.find_elements_by_css_selector('p:only-of-type')
for element in elements:
    print(element.text)

nth-of-type(n)

选其父元素第二个元素且元素为P的每个p元素,如果有多个也不会被选中

p:nth-of-type(2){color:red;font-size:20px;background-color:yellow;}
elements = wd.find_elements_by_css_selector('p:nth-of-type(2)')
for element in elements:
    print(element.text)

更多CSS选择器的介绍,可以参考CSS 选择器参考手册


扫码分享给朋友,一起学更有动力哦