css查找元素注意事项

一、CSS ID 选择器查找元素
1.注意：
如果元素的ID不唯一，或者是动态的
或者name以及linktext属性值也不唯一
我们就需要考虑用Xpath来查找元素了，然后再对元素执行操作
不管用什么方式查找元素，id、name、Xpath、CSS等等
都需要在页面上查找到唯一的元素，都应该只找到一个匹配的node
除非想要查找一批元素放在集合里，然后来查找集合
2.语法：（—代表）
tag[atttibute=’value’]
“#”---- ID
“.”—Class

3.示例：
a[id=’js-sidini-btn’]
#js-signin-btn
a#js-signin-btn （同一个页面使用同一个ID情况下使用）
二、CSS classes选择器查找元素
1.示例：
.icon-shopping-cart
Span.icon-shopping-cart
Span[class=’icon-shopping-cart’]
2.追加类
class1.class2.class3------>直到找到唯一的元素
三、CSS选择器-通配符查找元素
1.在CSS选择器中使用通配符：
“^”---->代表以什么文本开始
“$”----->代表以什么文本结尾
“*”----->代表包含什么文本
2.语法：

tag[attribute <specialcharacter>=’value’]

四、CSS选择器查看找子节点：
Li>#js-signin-btn div>.search-input —>1个匹配的节点
div>h1 div>label —> 1个匹配的节点
ul>li>a.shop-cart-icon
五、Xpath中相对路径和绝对路径的区别
1、相对路径
Xpath的相对路径用双斜线“//”:
举例：//li[@id=”shop-cart”]/a/span[2]
2、绝对路径
XPath的绝对路径用单斜线“/”:
举例：/html/body/div[1]/div[2]/ul/li[2]/a/span[2]
3、“/”和“//”的区别
“/”:元素是上一级节点的子节点中的一个，不能跳级
“//”:下级任何子节点或者任何镶嵌子节点中的一个，可以跳级
路径里面不要用“*”，要写明标签名
4、如何找父节点

Xpath-to-some-element//parent::<tag>

5、如何找前面的平级节点

Xpath-to-some-element//preceding-sibling::<tag>

6、如何找后面的平级节点

Xpath-to-some-element//following-sibling::<tag>