网站
引入
有时候只用元素名、class 或 id 不够方便。
如果想根据 HTML 元素上的某个属性来选中元素，就可以使用 CSS 属性选择器。
正文
定义
定义
CSS 属性选择器用于根据元素是否拥有某个属性，或者属性值是否符合条件，来选中页面中的某些元素。
属性选择器常见于表单、链接、图片、状态标记等场景。
例如可以选中所有带有 target 属性的 <a>，也可以选中所有 type="password" 的 <input>。
基础语法
元素[属性名] {
属性: 属性值;
}例如：
a[target] {
color: red;
}这个选择器会选中所有带有 target 属性的 <a> 元素。
常见写法
| 选择器 | 作用 | |
|---|---|---|
[attr] | 选中带有指定属性的元素 | |
[attr="value"] | 选中属性值完全等于指定值的元素 | |
[attr~="value"] | 选中属性值列表中包含指定单词的元素 | |
[attr|="value"] | 选中属性值等于指定值，或以 value- 开头的元素 | |
[attr^="value"] | 选中属性值以指定内容开头的元素 | |
[attr$="value"] | 选中属性值以指定内容结尾的元素 | |
[attr*="value"] | 选中属性值中包含指定内容的元素 |
[属性名]
[属性名] 用于选中拥有某个属性的元素，不关心属性值是什么。
<a href="https://example.com">普通链接</a>
<a href="https://example.com" target="_blank">新窗口打开</a>a[target] {
color: red;
}这个例子会选中带有 target 属性的 <a>。
第一个链接没有 target，不会被选中。
[属性名="属性值"]
[属性名="属性值"] 用于选中属性值完全相等的元素。
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">input[type="password"] {
border-color: red;
}这个例子会选中 type="password" 的 <input>。
它常用于给不同类型的表单控件设置不同样式。
[属性名~="值"]
[属性名~="值"] 用于选中属性值中包含某个独立单词的元素。
<p data-tag="news hot">热门新闻</p>
<p data-tag="news">普通新闻</p>
<p data-tag="hot-sale">促销信息</p>p[data-tag~="hot"] {
color: red;
}这个选择器会选中 data-tag="news hot"。
但是不会选中 data-tag="hot-sale"，因为 hot 不是一个独立单词。
[属性名|="值"]
[属性名|="值"] 用于选中属性值等于指定值，或以 值- 开头的元素。
这个写法常见于语言代码。
<p lang="zh">中文</p>
<p lang="zh-CN">简体中文</p>
<p lang="en">英文</p>p[lang|="zh"] {
font-family: "Microsoft YaHei", sans-serif;
}这个例子会选中 lang="zh" 和 lang="zh-CN"。
[属性名^="值"]
[属性名^="值"] 用于选中属性值以指定内容开头的元素。
<a href="https://example.com">外部链接</a>
<a href="/about">站内链接</a>a[href^="https://"] {
color: green;
}这个例子会选中 href 以 https:// 开头的链接。
常用于区分外部链接、站内链接或某类资源地址。
[属性名$="值"]
[属性名$="值"] 用于选中属性值以指定内容结尾的元素。
<a href="file.pdf">下载 PDF</a>
<a href="image.png">查看图片</a>a[href$=".pdf"] {
color: red;
}这个例子会选中链接地址以 .pdf 结尾的 <a>。
常用于给文件下载链接加特殊样式。
[属性名*="值"]
[属性名*="值"] 用于选中属性值中包含指定内容的元素。
<a href="/products/css-book">CSS 书籍</a>
<a href="/products/js-book">JavaScript 书籍</a>a[href*="css"] {
font-weight: 700;
}这个例子会选中 href 中包含 css 的链接。
它比 [属性名~="值"] 更宽松，不要求是独立单词。
不区分大小写匹配
属性选择器可以在结尾加 i，表示匹配时不区分大小写。
<a href="document.PDF">下载文件</a>a[href$=".pdf" i] {
color: red;
}这个例子中，虽然地址结尾是 .PDF，但因为加了 i，所以仍然可以匹配。
例子
给必填输入框加样式
<input type="text" placeholder="用户名" required>
<input type="text" placeholder="昵称">input[required] {
border-color: #ef4444;
}这个例子会选中带有 required 属性的输入框。
常用于提示用户这个表单项是必填项。
区分不同输入类型
<input type="text" placeholder="用户名">
<input type="email" placeholder="邮箱">
<input type="password" placeholder="密码">input[type="email"] {
background-color: #eff6ff;
}
input[type="password"] {
background-color: #fef2f2;
}不同 type 的输入框可以设置不同背景色，方便区分表单内容。
给外部链接加标记
<a href="/about">关于我们</a>
<a href="https://developer.mozilla.org">MDN</a>a[href^="https://"] {
text-decoration: underline;
}这个例子会选中以 https:// 开头的链接。
实际项目中也可以用它提醒用户这是外部链接。
给图片类型链接加样式
<a href="photo.jpg">查看 JPG 图片</a>
<a href="manual.pdf">下载说明书</a>a[href$=".jpg"],
a[href$=".png"] {
color: #16a34a;
}这个例子会选中图片链接。
多个选择器可以用逗号 , 分隔，表示同时应用同一组样式。
和 class 选择器的区别
属性选择器是根据 HTML 属性来选中元素。
class 选择器是根据 class 名称来选中元素。
<button class="btn" disabled>提交</button>.btn {
padding: 8px 16px;
}
button[disabled] {
opacity: 0.5;
}这里 .btn 更像是组件样式，button[disabled] 更像是根据元素状态补充样式。
特点
- 属性选择器用于根据 HTML 属性选中元素
[attr]只判断有没有这个属性[attr="value"]要求属性值完全相等[attr^="value"]判断属性值开头[attr$="value"]判断属性值结尾[attr*="value"]判断属性值中是否包含某段内容- 属性选择器常用于表单、链接、图片和自定义属性
- 属性选择器的优先级和
class选择器同一级别
注意事项
[attr="value"]是完全匹配，值不一样就不会选中[attr*="value"]范围比较宽，可能选中不想选的元素- 如果只是为了写组件样式，通常
class选择器更清晰 - 属性选择器适合根据已有属性补充样式，不一定要额外加
class - 表单中的
disabled、required、checked等属性也可以结合伪类一起使用 - 属性选择器太长时，代码可读性会变差
理解
可以把属性选择器理解为：不看元素叫什么，也不只看 class，而是看它身上有没有某个“标记”。
例如 input[type="password"] 就是在说：选中所有 type 属性等于 password 的输入框。
它很适合处理链接地址、表单类型、文件类型、自定义属性这些场景。
平时写页面时，常规样式优先用 class，需要根据元素属性做区分时，再使用属性选择器。
引出
理解属性选择器之后，可以继续学习 CSS 伪类，用来选中元素的某种状态或位置。