以下演示操作以该网址中的输入框为例:https://learn.letskodeit.com/p/practice

一、css样式中有三种通配符“^、$、*”

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

语法:tag[attribute<special character>=’value’]

           标签[属性  通配符='属性值']

 

二、^代表文本的开始

当我们使用“input[class = 'inputs']”查找元素时,浏览器自动帮我们匹配到了一个“class”等于“inputs”的元素

章节十、5-CSS---用CSS 通配符定位元素 随笔 第1张

当我们需要找到“class”属性的值包含“inputs”这个字符串且以“inputs”开头时,我们查找元素时语法需要写成input[class^= 'inputs']

章节十、5-CSS---用CSS 通配符定位元素 随笔 第2张

 

三、$代表文本的结束

 input[class= 'displayed-class']当我们使用此形式去查找元素时,结果为“0”

章节十、5-CSS---用CSS 通配符定位元素 随笔 第3张

 input[class$= 'displayed-class']当我们使用此形式去查找元素时,查找到了class属性值包含“displayed-class”且以“displayed-class”结尾

章节十、5-CSS---用CSS 通配符定位元素 随笔 第4张

 

四、*代表文本包含的内容

input[placeholder*= 'Enter']代表我们需要查询元素为laceholder的属性且该属性值包含'Enter

章节十、5-CSS---用CSS 通配符定位元素 随笔 第5张

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄