Css的定位比较灵活，因为他它用到的更多的匹配符和规格。
下面主要通过举例来说明
具体可见w3school链接
【举例1】虫师文章中的一个例子，元素如下：
<form id="form1" class="fm" action="/s" name="f1">

<span class="bg s_ipt_wr">

<input id="kw1" class="s_ipt" type="text" maxlength="100" name="wd" autocomplete="off">

那么定位分别如下：

1.  id定位：    css=#kw1

2.  class定位：css=.s_ipt

3.  单个属性定位：css=[name=wd]        css=[type=text]     
css=[autocomplete=off]

4.  多个属性定位：css=[#form1 input[name=text]]

5.  父子定位：

css=span > input

css=form > span > input

6.  根据标签名定位：

css=input

【举例2】

image

想要定位到某个元素的话，首先应该考虑这个元素有没有唯一属性，例如id。

如果没有唯一属性的话，再考虑从这个元素的父元素、祖宗元素、隔壁元素中找到唯一属性，然后再定位到这个元素(参考)。

//通过有唯一属性的父元素，向下定位到目标元素。注意"空格"和">"的区别

css ="li[data-sku='13435315793'] .p-img>a"

这样一来，不管这个数据的位置如何改变，只要改商品的标志，即13435315793不变，测试用例都不需要额外的维护了。

【举例3】

image

2种定位方式

css=.footer-link .stop （class=footer-link元素内的所有class=stop的元素。如果stop只有1个的话，那么直接css=.stop也可以 ）

xpath=//a[text()="停止投放"]' 文本等于“停止投放”的所有链接a元素

对于有子元素的，可以使用元素：nth-child(n)表示：

image

css=#ershou .category-group a:nth-child(2)

image

image

【举例5】
定位元素原为
<select class="input input-6 placeholder" name="品牌">
<option value=""></option>
<optgroup label="--A--">
<option value="m183754">奥驰汽车</option></optgroup>

屏幕快照 2018-05-21 上午11.43.03.png

css定位奥驰汽车
css=select[name=品牌] optgroup[label=--A--] option:nth-child(1)

【举例5】

image.png

保洁清洗定位
xpath定位
//*[@id="fuwu"]/ul/li[1]/a[2]

css定位

fuwu .fuwu-subgroup a:nth-child(2)