CSS元素定位笔记

CSS定位

学css之前建议先学下XPath定位方法,阶梯形理解学起来反而更快.css相比XPath确实更简洁高效.

完整文档可以查看: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors

id选择器

定位id用#

/* 例如要定位id = username, #username即可 */
#username

class选择器

定位class用.

/* 定位class= password,输入.pasword 即可*/
.password

元素标签选择器

定位元素标签时,直接输入元素的标签成即可

/* 例如要定位a标签时,直接输入a 即可。*/
a
/* 例如要定位input标签时,直接输入input 即可。*/
input

属性选择器

/* 定位其他属性,需要输入[],在括号中输入[属性='属性值'] 即可*/
/* 例如name属性*/
[name='submit']
/* 例如 placeholder 属性 */
[placeholder="输入手机号"]
/* 也可以用来定位id和class*/
[id=‘username’]
[class=‘password’]

层级选择器

/* 方法1: 直接子节点, 例如要定位p标签下的input, 用>选择直接下层标签*/
p>input

/* 方法2: 简洁子节点/孙子节点,例如要定位p标签下的input, 用 选择间接下层标签*/
p input
/* 两者区别*/
>定位直接子节点;
空格定位间接子节点

层级选择器元素重复的处理—父节点增加属性选择

/* 例如,用p>input标签,选择到多个元素,如何选择目标元素*/
p>input  /*选择到多个元素*/
/* 例如: p标签有id='p1',可以在在p标签加属性匹配*/
p#p1>input

/* 例如: p标签有没有id和class属性,有name='submit'或其他属性placeholder="输入手机号",可以在在p标签加其他属性匹配*/
p[name='submit']>input
或
p[placeholder="输入手机号"]>input

/* 子节点增加属性选择*/
p>input[placeholder="电子邮件"]

css扩展

/* type属性以p字母开头的元素 */
input[type^='p']
/* type属性以d结尾的元素 */
input[type$='d']
/* type属性包含w的元素 */
input[type*='w']