有了前面介绍的id、name、xpath定位方式,对于平时需要使用的定位方式基本都能做到,接下来在介绍一个稍微有点难度的css定位。css定位灵活,方便,但需要有点点基础。
还是以百度搜索的为例做说明:
"#0000cc">
<div id="wrapper" style="display: block;">
<div id="content" style="display: block;">
<div id="u1" style="display: block;">
<div id="m">
id="lg">
id="nv">
<div id="fm">
先看个表格吧,简单整理了下,以便说明:
选择器 | 例子 | 说明 |
---|---|---|
* | * | 通用元素选择器,匹配任何元素 |
E | div | 标签选择器,匹配所有使用 E 标签的元素 |
.info class | .s_ipt_wr | 匹配所有 class 属性中包含 info 的元素 |
footer id | kw | 匹配所有 id 属性等于 footer 的元素 |
E,F | div,p | 多元素选择器,同时匹配所有 E 元素或 F 元素,E 和 F 之间用逗号分隔 |
E F | div p | 后代元素选择器,匹配所有属于 E 元素后代的 F 元素,E 和 F 之间用空格分隔 |
E > F | div>p | 子元素选择器,匹配所有 E 元素的子元素 F |
E + F | p+div | 毗邻元素选择器,匹配紧随 E 元素之后的同级元素 F (只匹配第一个) |
E ~ F | p ~ div | 同级元素选择器,匹配所有在 E 元素之后的同级 F 元素 |
E[att=’val’] | div[id=”kw”] | 属性 att 的值为 val 的 E 元素 (区分大小写) |
E[att^=’val’] | div[id^=”kw”] | 属性 att 的值以 val 开头的 E 元素 (区分大小写) |
E[att$=’val’] | div[id$=”kw”] | 属性 att 的值以 val 结尾的 E 元素 (区分大小写) |
E[att*=’val’] | div[id*=”kw”] | 属性 att 的值包含 val 的 E 元素 (区分大小写) |
E[att1=’v1’][att2*=’v2’] | form[id=”form”][class=”fm”] | 属性 att1 的值为 v1,att2 的值包含 v2 (区分大小写) |
E:contains(‘xxxx’) | 内容中包含 xxxx 的 E 元素 | |
E:not(s) | 匹配不符合当前选择器的任何元素 | |
E:nth-child() | div:nth-child(1) | 找他的子元素,括号中的数字从1开始 |
E:first | div:first | 在其父元素中的E子元素集合中排在第1个的E元素 |
E:last | div:last | 在其父元素中的E子元素集合中排在最后1个的E元素 |
上面的表格中基本涵盖了平时所用的所有定位方式