（八）WebDriver API之定位元素-CSS定位
随笔记录方便自己和同路人查阅。
#------------------------------------------------我是可耻的分割线-------------------------------------------
学习selenium自动化之前，最好先学习HTML、CSS、JavaScript等知识，有助于理解定位及操作元素的原理。关于python和selenium安装请自行搜索别的资料，
这里就不多做介绍了，所有例子均使用python3.6+selenium执行的。
#------------------------------------------------我是可耻的分割线-------------------------------------------
CSS定位
CSS（Cascading Style Sheets）是一种语言，它用来描述HTML和XML文档的表现。CSS使用选择器来为页面元素绑定属性。这些选择器可以被selenium用作另外的定位策略。
CSS可以较为灵活的选择空间的任意属性，一般情况下定位速度要比XPath快，但对于初学者来说学习起来稍微有点难度，下面我们就详细地介绍CSS的语法与使用。
|
选择器 |
例子 |
描述 |
|
.class |
.intro |
class选择器，选择class=’intro’的所有元素 |
|
#id |
#firstname |
Id选择器，选择id=’firstname’的所有元素 |
|
* |
* |
选择所有元素 |
|
element |
p |
所有<p>元素 |
|
Element > element |
div > input |
选择父元素为<div>的所有<input>元素 |
|
Element + element |
div + input |
选择同一级中紧接在<div>元素之后的所有<input>元素 |
|
[attribute=value] |
[target=_blank] |
选择target=’_blank’的所有元素 |
下面同样以百度输入框和搜索按钮为例介绍CSS定位的用法。
...
<span class=’bg s_ipt_wr’>
<input id=’kw’ class=’s_ipt’ sutocomplete=’off’ maxlength=’100’ value=’’ name=’wd’
</span>
<span class=’bg s_ipt_wr’>
<input id=’su’ class=’bg s_btn’ type=’submit’ value=’百度一下’
</span>
...
1）通过class属性定位：
find_element_by_css_selector(‘.s_ipt’)
find_element_by_css_selector(‘.bg s_btn’)
find_element_by_css_selector()方法用于CSS语言定位元素，点号(.)表示通过class属性来定位元素。
2）通过id属性定位：
find_element_by_css_selector(‘#kw’)
find_element_by_css_selector(‘#su’)
井号(#)表示通过id属性来定位元素
3）通过标签名定位：
find_element_by_css_selector(‘input’)
在CSS语言中，用标签名定位元素不需要任何符号标识，直接使用标签名即可。但我们前面已经了解了，标签名重复的概率非常大，所以通过这种方式很难找到想要的元素。
我们可以通过以下几种方式来使标签名查找方式生效：
1、通过父子关系定位：
find_element_by_css_selector(‘span>span’)
上面的写法表示有父亲，它的标签名为span，查找它的所有标签名交input的子元素
2、通过属性定位：
find_element_by_css_selector(“[autocomplete=off]”)
find_element_by_css_selector(“[name=’kw’]”)
find_element_by_css_selector(“[type=’submit’]”)
在CSS当中也可以使用元素的任意属性，只要这些属性可以唯一标识这个元素。对于属性值来说，可加引号，也可以不加，但注意和整个字符串的引号进行区分。
3、组合定位：
我们当然可以把上面的定位策略组合起来使用，这就大大加强了定位元素的唯一性。
find_element_by_css_selector(“span.bg s_ipt_wr>input.s_ipt”)
find_element_by_css_selector(“span.bg s_ipt_wr>input#su”)
有一个父元素，它的标签名叫span；它有一个class属性值叫bg s_ipt_wr；它有一个子元素，标签名叫inout，并且这个子元素的class属性值叫s_ipt。好吧，我们要找的就是具有这么多特征的一个子元素。
