CSS定位

浏览器检查元素定位方法

示例：https://www.12306.cn/index/index.html

　　定位，出发地输入框元素

• 在Console输入 $$() ，括号中填写CSS定位语句
  • 查询结果显示为1条

　　　　　　如图：输入 $$("#fromStationText")  ，点击回车，即可显示查询结果

　　　　　　　　鼠标放在查询结果 0:  上面，则会在web界面上高亮显示该位置

　　　　　　　　鼠标点击查询结果 0:  ，则会跳到 Elements 界面，并高亮显示定位的元素

• • 查询结果显示为多条　　

　　　　　　如图：输入 $$(".form-bd .input-city input") ，点击回车，即可查看查询结果

　　　　　　　　当结果不唯一时，就需要重新找到唯一定位

• 在 Elements 界面，键盘点击 Ctrl + F ，在查询框内输入 CSS 语句
  • 查询结果显示为1条

　　　　　　如图：输入 #fromStationText，若存在该元素，则定位到该元素位置，并高亮显示

　　　　　　查询结果如果只有一条，则会显示 1 of 1

• • 查询结果显示为多条　　

　　　　　　如图：输入.form-bd .input-city input 即可查看查询结果

　　　　　　当结果不唯一时，会高亮显示第一个结果，查询结果处 1 of 12 是指，该查询结果共 12 个，当前高亮显示为第 1 个

CSS定位方法：

CSS选择器参考手册：http://www.w3school.com.cn/cssref/css_selectors.asp

以百度首页输入框示例

根据属性定位元素

• id
  • 语法：#id的属性值
  • 示例：定位输入框 ==> #kw
• class
  • 语法：.class的属性值（英文状态下的 点(.)）
  • 示例：定位输入框 ==> .s_ipt
• 标签tag
  • 语法：标签名
  • 示例：input

根据其他属性定位

• 语法：[属性名=属性值]
• 示例
  1. [name=wd] 或 [name="wd"]        ==> 属性值的引号("")，可写可不写；但是在XPath中，属性值必须带引号
  2. [maxlength="100"]
  3. [id="kw"]           ==> 如果记不清CSS中 id 或 class 的写法，也可以使用该方法
  4. [name*=d]　　 ==> name属性值包含 d 的元素
  5. [name^=w]　　==> name属性值以 w 开头的元素
  6. [name$=d]        ==> name属性值以 d 结尾的元素

根据标签和元素属性组合定位

• input#kw　　            标签名+id
• input.s_ipt                 标签名+class
• input[type="text"]      标签名+属性
• input[name$=d][type="text"]        标签名为 input 中 name 属性值以 d 结尾，且 type 属性值为 text 的元素

CSS中的层级关系

• 表示直接子元素：>
  • form>span>input#kw

• 表示非直接子元素：空格( )
  • form input#kw

根据索引定位

• .soutu-btn+input         ==> 选择class属性为soutu-btn元素后面紧挨着的 input 元素

• [name=issp]~input         ==> 选择class属性为soutu-btn元素后面所有的 input 元素

• input:nth-child(2)        ==> 选择属于 input 父元素的第2个子元素的每个 input 元素

• input:nth-of-type(1)    ==> 选择属于 input 父元素的 input 子元素中第1个 input 元素

CSS 和 XPath 的区别

• CSS

  1. 定位速度快
  2. 抗变性强
  3. 语法简洁
• XPath
  1. 定位语法丰富
  2. 定位速度相对较慢
  3. 抗变性弱

原文地址：https://www.cnblogs.com/wilson-5133/p/10912979.html