Python3 CssSelector定位方式实例详解

╰+哭是因爲堅強的太久メ 2022-05-10 07:34 158阅读 0赞

例子：

html = """
        <div id='content'>
            <ul class='list'>
                <li class='one'>哈哈</li>
                <li class='two'>Two</li>
                <li class='three'>Three</li>
                <li class='four four1 four2 four3'>Four</li>
                <div id='inner'>呵呵呵
                    <a href='http://www.baidu.com'>百度一下</a>
                    <p>第一段</p>
                    <p>第2段</p>
                    <p>第3段</p>
                    <p>第4段
                        <span id="first">大师傅大师傅！！</span>
                    </p>
                    <p>第5段</p>
                    <p>第6段</p>
                </div>
                <div id='inne inner'>嘿嘿嘿</div>
            </ul>
            <ul class='text'>This is Text</ul>
        </div>
    """

**基本css选择器**

CSS选择器中，最常用的选择器如下：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;">选择器</td> 
   <td style="vertical-align:top;">描述</td> 
   <td style="vertical-align:top;">举例</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">*</td> 
   <td style="vertical-align:top;">通配选择器，选择所有的元素</td> 
   <td style="vertical-align:top;">*</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">&lt;type&gt;</td> 
   <td style="vertical-align:top;">选择特定类型的元素，支持基本HTML标签</td> 
   <td style="vertical-align:top;">h1</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">.&lt;class&gt;</td> 
   <td style="vertical-align:top;">选择具有特定class的元素。</td> 
   <td style="vertical-align:top;">.class1</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">&lt;type&gt;.&lt;class&gt;</td> 
   <td style="vertical-align:top;">特定类型和特定class的交集。（直接将多个选择器连着一起表示交集）</td> 
   <td style="vertical-align:top;">h1.class1</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">#&lt;id&gt;</td> 
   <td style="vertical-align:top;">选择具有特定id属性值的元素</td> 
   <td style="vertical-align:top;">#id1</td> 
  </tr> 
 </tbody> 
</table>

if __name__=='__main__':
        html = etree.HTML(html)
        Csses = html.cssselect('*')
        for css in Csses:
            print (css.text)

该程序会输出所有标签的文本内容，即\*表示选择所有的元素

Csses = html.cssselect('li')
        for css in Csses:
            print (css.text)

输出结果：

哈哈  
Two  
Three  
Four

该程序会输出“li”标签的文本内容，即<type>选择特定类型的元素，换成其他标签则显示相应的文本

Csses = html.cssselect('.text')
        for css in Csses:
            print (css.text)

输出结果：

This is Text

代码片中的.text表示选择class属性值为text的标签。

Csses = html.cssselect('li.four1')
        for css in Csses:
            print (css.text)

输出结果：

Four

代码片中的li.four1表示选择所有的li标签，class属性值包含four1的标签。

Csses = html.cssselect('#inner')
        for css in Csses:
            print (css.text)

输出结果：

呵呵呵

代码片中的\#inner表示id属性值为inner的标签。

## 属性选择器 ##

除了最基本的核心选择器外，还有可以基于属性的属性选择器：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;">选择器</td> 
   <td style="vertical-align:top;">描述</td> 
   <td style="vertical-align:top;">举例</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">[attr]</td> 
   <td style="vertical-align:top;">选取定义attr属性的元素，即使该属性没有值</td> 
   <td style="vertical-align:top;">[placeholder]</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">[attr="val"]</td> 
   <td style="vertical-align:top;">选取attr属性等于val的元素</td> 
   <td style="vertical-align:top;">[placeholder="请输入关键词"]</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">[attr^="val"]</td> 
   <td style="vertical-align:top;">选取attr属性开头为val的元素</td> 
   <td style="vertical-align:top;">[placeholder^="请输入"]</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">[attr$="val"]</td> 
   <td style="vertical-align:top;">选取attr属性结尾为val的元素</td> 
   <td style="vertical-align:top;">[placeholder$="关键词"]</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">[attr*="val"]</td> 
   <td style="vertical-align:top;">选取attr属性包含val的元素</td> 
   <td style="vertical-align:top;">[placeholder*="入关"]</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">[attr~="val"]</td> 
   <td style="vertical-align:top;">选取attr属性包含多个空格分隔的属性，其中一个等于val的元素</td> 
   <td style="vertical-align:top;">[placeholder~="关键词"]</td> 
  </tr> 
 </tbody> 
</table>

Csses = html.cssselect('[href]')
        for css in Csses:
            print (css.text)

输出结果：

百度一下

代码片中的\[href\]表示包含href属性的所有标签

Csses = html.cssselect('[class=two]')
        for css in Csses:
            print (css.text)

输出结果：

Two

代码片中的\[class=two\]表示class属性值为two的所有标签

Csses = html.cssselect('[class^=t]')
        for css in Csses:
            print (css.text)

输出结果：

Two  
Three  
This is Text

代码片中的\[class^=t\]表示class属性值以t开头的所有标签

Csses = html.cssselect('[class$=e]')
        for css in Csses:
            print (css.text)

输出结果：

哈哈  
Three

代码片中的\[class$=e\]表示class属性值以e结尾的所有标签

Csses = html.cssselect('[class*=r]')
        for css in Csses:
            print (css.text)

输出结果：

Three  
Four

代码片中的\[class\*=r\]表示class属性值包含r字母的所有标签

Csses = html.cssselect('[id~=inner]')
        for css in Csses:
            print (css.text)

输出结果：

呵呵呵  
  
嘿嘿嘿

代码片中的\[id~=inner\]表示id属性值包含inner的所有标签，inner是一个单独的词，即如果有多个属性值，则必须以空格隔开

## 关系选择器 ##

有一些选择器是基于层级之间的关系，这类选择器称之为关系选择器。

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;">选择器</td> 
   <td style="vertical-align:top;">描述</td> 
   <td style="vertical-align:top;">举例</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">&lt;selector&gt;&nbsp;&lt;selector&gt;</td> 
   <td style="vertical-align:top;">第二个选择器为第一个选择器的后代元素，选取第二个选择器匹配结果</td> 
   <td style="vertical-align:top;">.class1 h1</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">&lt;selector&gt; &gt; &lt;selector&gt;</td> 
   <td style="vertical-align:top;">第二个选择器为第一个选择器的直接子元素，选取第二个选择器匹配结果</td> 
   <td style="vertical-align:top;">.class1 &gt; *</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">&lt;selector&gt; + &lt;selector&gt;</td> 
   <td style="vertical-align:top;">第二个选择器为第一个选择器的兄弟元素，选取第二个选择器的下一兄弟元素</td> 
   <td style="vertical-align:top;">.class1 + [lang]</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">&lt;selector&gt; ~ &lt;selector&gt;</td> 
   <td style="vertical-align:top;">第二个选择器为第一个选择器的兄弟元素，选取第二个选择器的全部兄弟元素</td> 
   <td style="vertical-align:top;">.class1 ~ [lang]</td> 
  </tr> 
 </tbody> 
</table>

Csses = html.cssselect('div li')
        for css in Csses:
            print (css.text)

输出结果：

哈哈  
Two  
Three  
Four

代码片中的div li表示div标签下的所有li标签，中间用空格隔开

Csses = html.cssselect('div>a')
        for css in Csses:
            print (css.text)

输出结果：

百度一下

代码片中的div>a表示div标签下的所有a子标签，a必须是div的子标签

Csses = html.cssselect('li+li')
        for css in Csses:
            print (css.text)

输出结果：

Two  
Three  
Four

代码片中的li+li表示li标签和li标签是兄弟标签，满足这样条件的一共有三个。

Csses = html.cssselect('a+p')
        for css in Csses:
            print (css.text)

输出结果：

第一段

Csses = html.cssselect('a~p')
        for css in Csses:
            print (css.text)

输出结果：

第一段  
第2段  
第3段  
第4段  
  
第5段  
第6段

## 联合选择器与反选择器 ##

利用联合选择器与反选择器，可以实现与和或的关系。

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;">选择器</td> 
   <td style="vertical-align:top;">描述</td> 
   <td style="vertical-align:top;">举例</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">&lt;selector&gt;,&lt;selector&gt;</td> 
   <td style="vertical-align:top;">属于第一个选择器的元素或者是属于第二个选择器的元素</td> 
   <td style="vertical-align:top;">h1, h2</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">:not(&lt;selector&gt;)</td> 
   <td style="vertical-align:top;">不属于选择器选中的元素</td> 
   <td style="vertical-align:top;">:not(html)</td> 
  </tr> 
 </tbody> 
</table>

Csses = html.cssselect('li,p')
        for css in Csses:
            print (css.text)

输出结果：

哈哈  
Two  
Three  
Four  
第一段  
第2段  
第3段  
第4段  
  
第5段  
第6段

代码片中的li,p表示选择所有的li标签和p标签

Csses = html.cssselect(':not([class])')
        for css in Csses:
            print (css.text)

输出结果：

None  
None

呵呵呵  
  
百度一下  
第一段  
第2段  
第3段  
第4段  
  
大师傅大师傅！！  
第5段  
第6段  
嘿嘿嘿

代码段中的:not(\[class\]表示选择不包含class属性的所有标签。

欢迎关注本人微信公众号,会分享更多的干货:

![20200607142700196.png][]

[20200607142700196.png]: /images/20220510/0e556c84173e46f58b53e71e5c6d22b3.png