使用“^=”属性选择器可匹配属性值以特定字符串开头的元素，如a[href^="https://"]{color:green}用于样式化外部链接，[class^="btn-"]统一处理按钮类名，div[id^="section-"]为指定ID添加背景，该选择器区分大小写且仅匹配开头部分。
在CSS中，若要匹配属性值以特定字符开头的元素，可以使用属性选择器中的“^=”操作符。这个选择器用于匹配某个属性值以指定字符串开始的元素。
语法说明
element[attribute^="value"] 会选中所有attribute属性值以"value"开头的element元素。示例：
/* 匹配所有 href 属性值以 "https://" 开头的 a 标签 */
a[href^="https://"] {
color: green;
}
/ 匹配所有 class 属性值以 "btn-" 开头的元素 /
[class^="btn-"] {
padding: 10px;
border: 1px solid #ccc;
}
/ 匹配所有 id 以 "section-" 开头的 div 元素 /
div[id^="section-"] {
background-color: #f0f0f0;
margin: 20px 0;
}
常见用途
- 样式化外部链接（如以 http:// 或 https:// 开头）
- 统一处理具有相同前缀的 class 名（如 btn-primary、btn-success 等）
- 为特定模块的 ID 添加统一视觉效果（如 sidebar-, nav- 等）
注意事项
- 该匹配是区分大小写的（除非 HTML 在 XML 环境下）
- 只匹配属性值的开头部分，中间或结尾不生效
- 不能匹配空值或不存在的属性
基本上就这些，使用 ^= 是最直接有效的方式匹配属性值的开始字符。
