首页技术文章正文

属性选择器有什么用途?CSS3属性选择器介绍

更新时间:2023年03月06日 11时29分38秒 来源:黑马程序员

1577370495235_学IT就到黑马程序员.gif


选择器可以简化网页代码的书写,让稳当的结构更加简单,在CSS3中常见的属性选择器主要包括E[att^=value]、E[att$=value]和E[att*=value]这三种性选择器,具体如下所示:

1.E[att^=value] 属性选择器
E[att^=value] 属性选择器是指选择名称为E的标签,且该标签定义了att属性,att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的,如果省略则表示可以匹配满足条件的任意标签。例如,div[id^=section]表示匹配包含id属性,且id属性值是以“section”字符串开头的div元素。

2.E[att$=value] 属性选择器
E[att$=value] 属性选择器是指选择名称为E的标签,且该标签定义了att属性,att属性值包含后缀为value的子字符串。与E[att^=value]选择器一样,E元素可以省略,如果省略则表示可以匹配满足条件的任意元素。例如,div[id$=section]表示匹配包含id属性,且id属性值是以“section”字符串结尾的div元素。

css3属性选择器


3.E[att * = value]选择器
E[att * = value]选择器用于选择名称为E的标签,且该标签定义了att属性,att属性值包含value子字符串。该选择器与前两个选择器一样,E元素也可以省略,如果省略则表示可以匹配满足条件的任意元素。例如,div[id * = section]表示匹配包含id属性,且id属性值包含“section”字符串的div元素。





猜你喜欢:

CSS3盒子模型边框怎样实现圆角效果?

黑马程序员Html5+Css3由浅入深视频教程下载

CSS3颜色不透明度的设置方法【web前端】    

黑马程序员HTML&JS+前端培训

分享到:
在线咨询 我要报名
和我们在线交谈!