属性选择器
[attr]/[attr=val]/[attr^=]/[attr$=]/[attr*=] 七种属性选择器
属性选择器
属性选择器根据属性及其值选择元素——无需 class，直接匹配属性。
学完本章你将： 掌握七种属性选择器语法。
七种语法
css
/* 1. [attr]——有该属性 */
[title] { border-bottom: 1px dotted; }
/* 2. [attr="val"]——属性等于 val */
[type="text"] { border: 1px solid #ddd; }
/* 3. [attr~="val"]——属性包含 val（完整单词） */
[class~="btn"] { } /* class="btn primary" ✓, class="btn-primary" ✗ */
/* 4. [attr|="val"]——属性等于 val 或以 val- 开头 */
[lang|="zh"] { } /* lang="zh" ✓, lang="zh-CN" ✓ */
/* 5. [attr^="val"]——属性以 val 开头 */
[href^="https"] { } /* 外部链接 */
/* 6. [attr$="val"]——属性以 val 结尾 */
[href$=".pdf"] { } /* PDF 链接 */
/* 7. [attr*="val"]——属性包含 val */
[class*="card"] { } /* class 含 card */实用场景
css
/* 外部链接加图标 */
a[href^="https"]::after {
content: " ↗";
}
/* PDF 链接标记 */
a[href$=".pdf"]::before {
content: "📄 ";
}
/* 不同类型 input 不同样式 */
input[type="text"] { }
input[type="email"] { }
input[type="submit"] { }
/* 含有 disabled 属性的元素 */
[disabled] { opacity: 0.5; cursor: not-allowed; }