[Python 应用：爬虫] Selelium 之 css selectors

文本内容参考：https://saucelabs.com/resources/articles/selenium-tips-css-selectors

 

CSS Selector 是什么？

简单说就是一种定位元素的方式，直接看下面用法说明。

 

CSS Selector 方式怎么用？

简单用法

 ------------------------------------------------------------------------------------------------------------------------------------

 

直接关系子元素（下一层级）

在XPATH里面，直接关系子元素是用‘/’来定义，在CSS中用的是">"

XPath: //div/a

CSS: div > a

 

子元素（不一定是下一层级的）

XPath: //div//a

CSS: div a

 

ID

在XPATH中元素通过Id来定位是用“[@id='example']” 来表示的，但是这CSS 中直接用“#” 表示

XPath: //div[@id='example']

CSS: #example

 

Class

在XPATH中元素通过Id来定位是用“[@class='example']” 来表示的，但是这CSS 中直接用“.” 表示;

 XPath: //div[@class='example']

CSS: .example

 

进阶用法

-------------------------------------------------------------------------------------------------------------------------------------------

 下一个同级元素

这种方式对于定位一组元素很有用。这种方式可以找到位于同一个父元素下的下一个相邻元素。看个例子

<form class = "form-signin" role = "form" action = "/index.php" method = "post">

<h4 class = "form-signin-heading"></h4> 

<input type = "text" class = "form-control" id = "username" name = "username" placeholder = "username" required autofocus></br> 

<input type = "password" class = "form-control" id = "password" name = "password" placeholder = "password" required> 

<p> 

<button class = "btn btn-lg btn-primary btn-block radius" type = "submit" name = "login">Login</button> 

</form> 

 

要找到username 后面的元素，可以通过以下方式。这种方式如果元素顺序换了的话，定位的元素也会不一样。

CSS: #username + input

 

对比来看XPATH通过这种方式定位时使用的语法

XPATH: //input[@id='username']/following-sibling::input[1]

 

元素的属性值

如果我们不关心元素的顺序，我们可以通过元素的属性值来定位元素，简单如下：

XPATH: //input[@name='username']

CSS: input[name='username']

如果想要更具体确切的话，可以在后面增加更多的属性值，如下：

XPATH: //input[@name='login'and @type='submit']

CSS: input[name='login'][type='submit'] 

 

选择特定的匹配

除了上面的方法外，CSS Selector 提供更为精细的定位方式。如下网页，如果我们想要定位第四个li元素同时不用考虑其他元素。这个时候

我们应该使用 nth-child 或者 nth-of-type的方式。

如果我们想要定位到第四个li元素，我们可以通过 nth-of-type的方式，如下：

CSS: #recordlist li:nth-of-type(4)

如果我们想定位到到第四个元素而且第四个元素要为li的情况，就要通过下面的方式，下面的用法定位到的是 Car 元素。

CSS: #recordlist li:nth-child(4)

注意如果你不指定第四个元素的类型，这样的话，默认就会返回第四个元素。如下

CSS: #recordlist *:nth-child(4)

 

部分字符匹配

CSS 可以通过使用Id Name等方式的时候只匹配部分字符（匹配只修改了部分字符的元素很好用。表达的时候会用到^=, $=, 或者 *=。

^= 是匹配前缀用的，例如：

CSS: a[id^='id_prefix_']

Id 以 id_prefix_ 开头的元素就可以匹配到。

$= 是匹配后缀用的，例如：

CSS: a[id$='_id_sufix']

Id 以 _id_sufix 结尾的元素就可以匹配到。

*= 是只要包含内容就行，例如：

CSS: a[id*='id_pattern']

Id 中只要包含文本id_pattern 的元素就可以匹配到。

 

内部文本匹配（强力推荐）

这种方式会更为有用，因为只有元素中包含定义的文本内容就可以被定位到，不管这个文本内容在元素中代表什么含义。这种方式用contain来表示，例如：

CSS: a:contains('Log Out')

这样的话，不管哪个元素包含“Log Out”，不管这个元素在什么位置，都会被定位到。

 

 

转载于:https://www.cnblogs.com/dream-on-all-in/p/11135370.html