属性选择器可根据元素的属性或属性值精确选中元素并应用样式。1. [attribute] 选中具有指定属性的元素，如 [title] { color: blue; } 作用于所有含 title 属性的标签。2. [attribute=”value”] 仅匹配属性值完全相等的元素，如 [type=”email”] 设置邮箱输入框边框。3. [attribute~=”word”] 匹配属性值中包含独立单词的元素，适用于多类名场景，如 [class~=”primary”] 为含 primary 类的按钮设背景色。4. [attribute=”substring”] 只要属性值包含指定子串即匹配，如 [href=”https://www.php.cn/faq/github”] 加粗含 github 的链接。5. [attribute^=”prefix”] 选中属性值以特定字符串开头的元素，如 [href^=”tel:”] 为电话链接添加电话图标。6. [attribute$=”suffix”] 匹配属性值以指定后缀结尾的元素，如 [href$=”.pdf”] 高亮 PDF 下载链接。7. [attribute|=”value”] 匹配值等于指定项或以该值加连字符开头的元素，常用于语言设置，如 [lang|=”zh”] 定义中文引号格式。这些选择器可组合使用，如 type=”text” 同时满足两个
CSS 属性选择器允许你根据元素是否具有某个属性，或属性值是否符合特定模式来选中元素。这种方式非常灵活，尤其适用于不修改 HTML 结构的情况下精确控制样式。
1. 基础属性选择器 [attribute]
选择具有指定属性的元素，不管属性值是什么。
例如：选中所有带有 title 属性的元素
css:
[title] {
color: blue;
}
这会影响所有包含 title 属性的标签，比如 <a title=”home”>首页</a>
2. 属性值完全匹配 [attribute=”value”]
只选中属性值完全等于指定字符串的元素。
例如：选中 type 为 “email” 的输入框
css:
[input type=”email”] {
border: 2px solid red;
}
3. 属性值包含单词 [attribute~=”word”]
匹配属性值中包含独立单词的元素，单词以空格分隔。
立即学习“前端免费学习笔记（深入）”；
常用于 class 属性，因为 class 可以有多个值
html: <div class=”btn primary large”></div>
css: [class~=”primary”] { background: green; }
这样能选中 class 包含 “primary” 这个完整词的元素
4. 属性值包含子串 [attribute*=”substring”]
只要属性值中包含指定字符片段就匹配，是最宽松的匹配方式。
免费在线AI卡通图片生成器 | 一键将图片或文本转换成精美卡通形象
51
查看详情
例如：选中所有 href 中包含 “https://www.php.cn/faq/github” 的链接
css:
[a href*=”https://www.php.cn/faq/github”] {
font-weight: bold;
}
5. 属性值前缀匹配 [attribute^=”prefix”]
选中属性值以指定字符串开头的元素。
例如：给所有电话号码链接加图标
css:
[a href^=”tel:”]::before {
content: “? “;
}
6. 属性值后缀匹配 [attribute$=”suffix”]
选中属性值以指定字符串结尾的元素。
例如：高亮所有 PDF 下载链接
css:
[a href$=”.pdf”] {
color: red;
font-style: italic;
}
7. 属性值用特定分隔符开头 [attribute|=”value”]
匹配属性值等于指定值或以该值加连字符开头的元素。
常用于语言属性
html: <html lang=”zh-CN”>
css: [lang|=”zh”] { quotes: “«” “»”; }
会匹配 lang=”zh” 和 lang=”zh-CN”
基本上就这些。属性选择器组合使用时威力更大，比如 [type=”text”][disabled] 可以同时满足多个条件。掌握这些能让你在不添加额外 class 的情况下精准控制样式。不复杂但容易忽略。
大家都在看：
css浮动与文本环绕效果如何实现
如何用css实现浮动元素移动动画
在css中如何用JavaScript动态添加样式
如何用css框架Tailwind制作按钮样式
暂无评论内容