首页技术文章正文

CSS3的三种属性选择器介绍

更新时间:2021年03月31日10时51分来源:传智教育浏览次数:

选择器可以简化网页代码的书写，让稳当的结构更加简单，在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元素。

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

猜你喜欢：

传智教育H5教程：HTML5+CSS3视频教程【百度云盘下载】

CSS3新增了哪些选择器？如何是使用？

H5+CSS3教程视频

Web前端培训：如何使用CSS3实现瀑布流效果?

传智教育web前端培训

上一篇：SCSS是什么?有什么特性？安装使用的步骤是什么？ 下一篇：怎样给:root选择器设置样式？设置过程演示