CSS(Casading Style Sheets)是一种用于渲染HTML或者XML文档的语言，CSS利用其选择器可以将样式属性绑定到文档中的指定元素。理论上来说无论一个元素定位多复杂都能够定位到元素。

不同的浏览器XPath引擎不同甚至没有自己的XPath引擎，导致了XPath定位速度较慢，所以推荐使用CSS来定位。

很多情况下CSS无法使用时，XPath非常容易就可以做到，其次是因为XPath比CSS更加简单且容易上手。

下面介绍CSS的几种定位方法：

1、CSS元素选择器

input 选择input元素

p 选择p元素

2、CSS ID与类选择器ID     选择器以 "#"来定义

class类    选择器以一个 "." 点号来定义

示例：搜狗搜索页面元素举例

#query  表示id为query的元素

.query  表示class为query的元素

3、CSS 属性选择器

属性选择器可以根据元素的属性级属性值来选择元素。

示例:

[title] 将title属性放到中括号里，表示选择具有该属性的元素

[title=value]    title属性等于value的元素

[title~=value]  title属性包含value单词的元素，注意是单词

[title|=value]    title属性以value单词开头的元素，注意是单词

[title^=value]   title属性以value开头的元素

[title$=value]    title属性以value结尾的元素

[title*=value]     title属性包含value开头的元素

input[title*=value] 表示input元素下有title属性包含value的元素

input[type='text'][name='query']#query input元素有type='test'、name='query'、id='query'的元素

4、CSS 后代选择器

后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

注意: 后代元素不一定是儿子，也有可能是孙子。

示例:  搜狗搜索页面元素

span input 选择span下的input元素

div.content span.enter-input input#stb 选择div.content下span.enter-input下的input id=stb的元素

5、CSS 子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。

如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，就使用子元素选择器。子元素选择器只能选择儿子。

示例:  搜狗搜索页面元素div>input 只作为 div 元素子元素的 input元素div>form>span>input div下的子元素form下的子元素span下的子元素inputdiv>form[name='sf']>span>input#query div下的子元素form[name='sf']下的子元素span下的子元素input#querydiv#content form>span>input#query div#content下的子元素form下的子元素span下的子元素input#query

6、CSS 相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一个元素后的元素，而二者有相同父元素。
示例：搜狗搜索页面元素示例input+input input后出现的input的元素div#content form>span+input div#content下的form元素下的子元素span同级相邻的第一个弟弟元素

7、CSS 伪类

CSS伪类用于向某些选择器添加特殊的效果。Selenium中元素CSS定位用的伪类只有:first-child(元素的第一个子元素)，其他的可靠性非常低或者不能使用。
示例：搜狗搜索页面元素示例input:first-child  所有第一个input元素 from >input:first-child 所有from子元素中的第一个input元素from span:first-child input:first-child from下的第一个span元素下的第一个input元素

8、CSS 选择器运用示例

9、CSS 选择器参考手册

参考w3school的选择器参考手册为样本，
原文参考链接: https://www.w3school.com.cn/cssref/css_selectors.asp