14. CSS3选择器 属性选择器

在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过id属性可以将不同div元素进行区分。

在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示:

属性选择器 功能描述
E[att^=”val”] 选择匹配元素E,且E元素定义了属性att,其属性值以val开头的任何字符串。
E[att$=”val”] 选择匹配元素E,且E元素定义了属性att,其属性值以val结尾的任何字符串,刚好与E[att^=”val”]相反。
E[att*=”val”] 选择匹配元素E,且E元素定义了属性att,其属性值任意位置包含了val。换句话说,字符串与属性值中的任意位置相匹配。

 实例展示

html代码:

<a href="xxx.pdf">我链接的是PDF文件</a>
<a href="#" class="icon">我类名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>

css代码:

a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}

效果如下:

CSS3选择器 属性选择器

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 14. CSS3选择器 属性选择器

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们