概述

[attribute^=value] 选择器用于匹配其属性值以给定值开头的元素。它只检查属性值的前缀，而不考虑其后缀。

语法

[attribute^=value] {
  /* CSS 样式 */
}

其中：

• attribute 是要匹配的属性名称。
• value 是要检查的属性值的前缀。

用法

[attribute^=value] 选择器可用于：

• 为具有特定属性值前缀的元素设置样式。
• 仅为匹配指定前缀的元素应用特定样式。
• 根据属性值的前缀创建动态样式。

示例

示例 1：匹配以 "data-" 开头的属性

<div data-type="user"></div>
<div data-type="admin"></div>
<div data-type="guest"></div>

[data-type^=data] {
  background-color: lightblue;
}

此样式将为所有以 "data-" 开头的 data-type 属性的元素设置浅蓝色背景。

示例 2：仅匹配以 "user-" 开头的属性

<div data-user-id="1"></div>
<div data-admin-id="2"></div>
<div data-guest-id="3"></div>

[data-user-id^=user-] {
  color: red;
}

此样式仅为 data-user-id 属性值以 "user-" 开头的元素设置红色文本颜色。

示例 3：动态样式

<div class="product" data-price="100"></div>
<div class="product" data-price="200"></div>
<div class="product" data-price="300"></div>

// www.javascriptcn.com code example
[data-price^=1] {
  background-color: green;
}

[data-price^=2] {
  background-color: yellow;
}

[data-price^=3] {
  background-color: red;
}

此样式会根据 data-price 属性值的前缀为产品元素设置不同的背景颜色。

浏览器支持

[attribute^=value] 选择器在所有现代浏览器中都得到广泛支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

注意事项

• [attribute^=value] 选择器区分大小写。
• 它只检查属性值的前缀，而不考虑后缀。
• 它可以与其他选择器结合使用以创建更复杂的匹配规则。