CSS3 属性选择器

属性选择器

指定目标元素的属性名称,获取属性对象。

[href] {
 color: orange; <!--设置属性名称为 href 的元素字体颜色为 橙色 -->
}

<a href="https://www.jmjc.tech">简明教程</a>

显示效果

简明教程

匹配规则

属性选择器支持的一些简单正则匹配语法

[type="password"] {
 /* 匹配属性值 */
}

[href^="http"] {
 /* ^开头匹配 | 匹配开头为 http 的属性值 */
}

[href$=".com"] {
 /* $结尾匹配 | 匹配结尾为 .com 的属性值 */
}

[href*="jmjc"] {
 /* 模糊匹配 | 匹配包含 jmjc 的属性值 */
}

[href~="a"] {
 /* 单一匹配 | 如果存在多个属性名称为 a 时,只匹配到其中一个 */
}
更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程