什么是CSS Selector?
Css Selector定位实际就是HTML的Css选择器的标签定位
工具
Css Selector的练习建议大家安装火狐浏览器(49及以下版本)后,下载插件FireFinder 或 FireBug和FirePath组合使用。
Css Selector使用方法
注:
①css selector定位不支持角标定位
②input标签选择器,定位到HTML中所有的Input标签
③div.inner通过定位div标签,再在div标签中查找class为inner的元素
④input#i1 先定位到Input标签,再在input标签中查找id为i1的元素
1.css selector支持id,class定位
①# 号代表id定位
比如:#i1
②. 点代表class定位
比如:.c1
③class定位时,还支持多个class定位,即通过连续.来递进缩小范围
比如:
<div class='inner' active>xxxxx</div>
定位方式应写为:.inner.active
2.css selector支持标签定位
与CSS相同,支持标签选择器,但是一个鲜叶重复的标签太多,因此这种方式常常不被采用。
定位方式:直接输入标签名称
3.css selector支持任意属性定位
属性定位,在中括号中写属性=属性值即可
[name='kw']
4.css selector提供标签属性组合定位
input[name='kw']
5.css selector的多属性组合过滤
多属性选择过滤,只需要多个[]连接就可以
select[name='city'][size='4'][multiple='multiple']
6.支持层级关系定位
与Xpath的不同 Css Selector通过 > 来区分层级的界定
select>option[value='3']
7.Css Selector模糊匹配
^= 匹配元素属性以什么开头
input[value^="登"]
$= 匹配属性以什么结尾
input[value$="录"]
*= 匹配属性包含什么值 input
[value*="录"]