011 认识CSS 属性选择器和高阶匹配用法

011 属性选择器和高阶匹配用法

根据标签的本身自带的属性进行查找的标签的方式,
如果需要精准查找,也可以使用属性=属性值的方式

属性查找

查找标签 有type属性的标签 加载样式
image-20230301232823063

属性和属性值的 查找

查找标签 有type属性和属性的值 的标签
查找的更为精准

image-20230301233148918

属性和属性值 再加标签名查找

使用组合选择的的规范 属性选择器+ 标签名

子代 属性值选择器
image-20230301234032838
自定义属性值

image-20230301234400949

css高阶玩法: 属性值匹配查询

高阶一 ^ $ * ~

^= 以什么为开头
$= 以什么为结尾
*= 属性值包含什么
~= 指定class专用,指定class的一个属性
以v开头的属性

image-20230302000935176

以 .png 结尾的属性

image-20230302001438470

属性值包含 部分的属性值

image-20230302002227486

~=  指定属性值内包含多个属性值时,要给某一个值的标签添加样式  用 ~= 就可以提取出来

image-20230302002856306

posted @ 2022-03-20 10:57  mmszxc  阅读(27)  评论(0)    收藏  举报