前端Wiki/CSS3/基础/新选择器

属性选择器

属性选择器按属性和属性值匹配元素，不依赖 class 和 id，特别适合处理带规律的属性（链接、表单、data-* 自定义属性）：

[disabled]：只要存在该属性就命中。
[type="text"]：属性值完全相等。
[href^="https"]：值以 https 开头（^ 类似正则）。
[href$=".pdf"]：值以 .pdf 结尾，给下载链接自动加图标就靠它。
[title*="重要"]：值中包含「重要」二字。
[data-role~="admin"]：值是空格分隔的词列表，含 admin 这个词。

实战中最常组合的是 ^= 和 $=：按文件后缀区分链接样式、按协议给外链加标识，都不用改一行 HTML。

本节要点五种匹配符：存在、= 完全相等、^= 开头、$= 结尾、*= 包含；最适合按链接后缀、表单类型、data-* 属性批量加样式。

CSS

<style>
  /* PDF 链接自动加后缀提示 */
  a[href$=".pdf"]::after {
    content: ' [PDF]';
    color: tomato;
  }
  /* 外链 https 换颜色 */
  a[href^="https"] { color: #0a7; }
  /* 禁用的输入框变灰 */
  input[disabled] {
    background: #eee;
    cursor: not-allowed;
  }
</style>
<a href="https://example.com">https 外链</a><br>
<a href="guide.pdf">使用手册</a><br>
<input type="text" placeholder="正常输入框">
<input type="text" value="被禁用" disabled>

🔗 相关词条自定义属性 HTTPS HTML 选择器元素列表外链

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读