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; }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 14. CSS3选择器 属性选择器
码云笔记 » 14. CSS3选择器 属性选择器