CSS3学习笔记（六）——属性选择器

Bambi12

于 2018-12-04 10:15:31 发布

阅读量242

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/Bambi12/article/details/84779991

CSS 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何使用CSS选择器针对特定属性值进行样式设置，包括以指定字符串开头、结尾及包含特定子串的属性值选择。通过实例展示了如何为链接设置不同背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html：

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

css：

/*属性值以“icon”开头的任何字符串*/
a[class^="icon"]{
	background:green;
	color:#fff;
}
/*属性值以“pdf”结尾的任何字符串*/
a[href$="pdf"]{
	background-color: orange;
	color:#fff;
}
/*属性值包含“more”的任何字符串*/
a[title*="more"]{
	background-color: blue;
	color: #fff;
}

笔记整理出自：https://www.imooc.com/learn/33