使用“^=”属性选择器可匹配属性值以特定字符串开头的元素，如a[href^="https://"]{color:green}用于样式化外部链接，[class^="btn-"]统一处理按钮类名，div[id^="section-"]为指定ID添加背景，该选择器区分大小写且仅匹配开头部分。

在CSS中，若要匹配属性值以特定字符开头的元素，可以使用属性选择器中的“^=”操作符。这个选择器用于匹配某个属性值以指定字符串开始的元素。

语法说明

示例：

/* 匹配所有 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 环境下）
• 只匹配属性值的开头部分，中间或结尾不生效
• 不能匹配空值或不存在的属性

基本上就这些，使用 ^= 是最直接有效的方式匹配属性值的开始字符。