Appearance
作用：根据元素是否拥有某个属性，或该属性的具体值来选择元素。非常适合在没有修改 HTML 类名的情况下，对特定类型的元素进行样式区分。 基本语法：
[attr]
选择带有attr属性的所有元素，无论值是什么。
css
[disabled] {
opacity: 0.5;
}
/* 所有带 disabled 属性的元素都会半透明 */
[attr="value"]
选择attr属性值完全等于value的元素。
css
input[type="text"] {
border: 1px solid #333;
}
/* 只选中 type 为 text 的输入框 */
[attr^="value"]
选择attr属性值以value开头的元素。
css
a[href^="https://"] {
color: green;
}
/* 所有外部安全链接（https开头）变绿色 */
[attr$="value"]
选择attr属性值以value结尾的元素。
css
a[href$=".pdf"] {
background: url(icon-pdf.svg) no-repeat right center;
}
/* 所有指向 PDF 的链接后面加一个图标 */
[attr*="value"]
选择attr属性值包含value子串的元素。
css
div[class*="card"] {
border-radius: 8px;
}
/* 类名中包含 "card" 的所有 div（如 card、card-header、my-card）都会圆角 */
常见用途：
- 区分不同类型的
<input>（如[type="checkbox"]、[type="radio"]）。 - 利用自定义数据属性（
data-*）进行样式控制，如[data-status="error"]。 - 美化指向特定文件类型的链接。