概述
[attribute^=value] 选择器用于匹配其属性值以给定值开头的元素。它只检查属性值的前缀，而不考虑其后缀。
语法
------------------ - -- --- -- -- -
其中：
attribute是要匹配的属性名称。value是要检查的属性值的前缀。
用法
[attribute^=value] 选择器可用于：
- 为具有特定属性值前缀的元素设置样式。
- 仅为匹配指定前缀的元素应用特定样式。
- 根据属性值的前缀创建动态样式。
示例
示例 1：匹配以 "data-" 开头的属性
---- ----------------------- ---- ------------------------ ---- ------------------------
----------------- - ----------------- ---------- -
此样式将为所有以 "data-" 开头的 data-type 属性的元素设置浅蓝色背景。
示例 2：仅匹配以 "user-" 开头的属性
---- ----------------------- ---- ------------------------ ---- ------------------------
--------------------- - ------ ---- -
此样式仅为 data-user-id 属性值以 "user-" 开头的元素设置红色文本颜色。
示例 3：动态样式
---- --------------- ----------------------- ---- --------------- ----------------------- ---- --------------- -----------------------
--------------- - ----------------- ------ - --------------- - ----------------- ------- - --------------- - ----------------- ---- -
此样式会根据 data-price 属性值的前缀为产品元素设置不同的背景颜色。
浏览器支持
[attribute^=value] 选择器在所有现代浏览器中都得到广泛支持，包括：
- Chrome
- Firefox
- Safari
- Edge
- Opera
注意事项
[attribute^=value]选择器区分大小写。- 它只检查属性值的前缀，而不考虑后缀。
- 它可以与其他选择器结合使用以创建更复杂的匹配规则。