[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”，不管这个元素在什么位置，都会被定位到。
