Day 3:CSS选择器查找元素

一、哪些情况不能用ID选择器

1. 元素的ID不唯一，或者ID是动态变化的
2. name以及linktext属性值不唯一

如果满足上述条件，则不能用ID选择器来定位元素，就需要依靠xpath或CSS来定位元素了
PS：不管使用什么方式来查找元素（比如id、name、xpath、CSS等），都需要确保页面上查找出来的元素的唯一性，应该只找到一个匹配的node（如何查看是否唯一，在前两篇已经详细说过——方式二如何查看匹配节点）

二、CSS选择器语法

tag[attribute=‘value’]
标签名[属性=‘值’]
在CSS里，#代表ID，.代表class

三、ID选择器查找元素

• 举个栗子
  我们写一下慕课网登录的CSS定位，有三种写法

1. 按语法规则输入：a[id=‘js-signin-btn’]，可以看到黄色高亮显示，说明CSS选择器是可以用的，显示一个匹配的节点
   

2. 在CSS语法中，#代表id，所以我们查找的属性时id的话，可以忽略语法，使用简写：#js-signin-btn，可以看到DOM里也是黄色背景高亮
   

3. 最后一种写法：a#js-signin-btn,把标签的名字加在了最前面，什么情况写需要加标签呢？如果这个页面有多个标签都有同一个id（一般不会出现这种情况），这种情况下，加上标签名，直接会查找到某个标签下的id,可以使搜索速度更快
   

四、class选择器查找元素

• 举个栗子
  我们写一下慕课网购物车的CSS定位

1. 按语法规则输入：span[class=‘icon-shopping-cart’]，只输入了一个class，但是没有查找到元素；为什么呢？是因为在单引号里class要完全匹配
   
   现在改一下class值，输入完整的class：span[class=‘icon-shopping-cart js-endcart’]，查找出来唯一的元素
   

2. 购物车元素的class有两个，我们先写icon-shopping-cart，使用.代替class，使用简写：.icon-shopping-cart，可以看到查找出三个元素，此时查找的元素是不唯一的，运行时会报错
   

3. 写js-endcart，输入.js-endcart，查找出来一个元素，是唯一的
   

4. 加上标签名，可以看到元素是在span这个标签里的，所以输入span.js-endcart，查找出来一个元素，是唯一的
   

• 追加class(.class1.class2.class3—)直到找到唯一的元素
  输入.icon-shopping-cart.js-endcart
  

五、通配符定位

语法：标签【属性 通配符=‘值’】
“^”代表以什么文本开始
“$”代表以什么文本结束
“*”代表包含什么文本

1. 输入div[class^=‘search’],可以查找到div标签下所有以search开头的class属性的元素
   
2. 输入div[class$=‘area’],可以查找到div标签下所有以area结尾的class属性的元素
   
3. 输入a[title*=‘页’],可以查找到a标签下所有包含页的title属性的元素
   

六、查找子节点

1. 通过找到父节点标签来定位：父节点>.class属性值（id属性用#）
   
   CSS选择器查找方法本篇已整理完，下篇整理xpath