[attribute|=value] 选择器用于选择具有指定属性，且该属性值包含指定子字符串的元素。

语法

[attribute|=value]

其中：

• attribute：要匹配的属性名称。
• value：要匹配的子字符串。

用法

[attribute|=value] 选择器可以用于选择具有以下条件的元素：

• 元素具有指定的属性。
• 属性值包含指定的子字符串。
• 子字符串可以出现在属性值的任何位置。

示例

以下示例选择具有 class 属性，且属性值包含子字符串 "button" 的所有元素：

[class|=button]

以下示例选择具有 id 属性，且属性值包含子字符串 "header" 的所有元素：

[id|=header]

以下示例选择具有 data-type 属性，且属性值包含子字符串 "image" 的所有元素：

[data-type|=image]

注意事项

• [attribute|=value] 选择器对大小写敏感。
• 子字符串可以出现在属性值的任何位置，包括开头、中间或结尾。
• 如果属性值中包含多个子字符串，则元素必须包含所有子字符串才能匹配选择器。

示例代码

HTML

<div class="primary-button">Primary Button</div>
<div class="secondary-button">Secondary Button</div>
<div id="main-header">Main Header</div>
<div id="secondary-header">Secondary Header</div>
<div data-type="image">Image</div>
<div data-type="text">Text</div>

CSS

-- -------------------- ---- -------
-- ------ ----- -------- -------- --- --
--------------- -
  ------ ------
  ----------------- -----
-

-- ------ -- -------- -------- --- --
------------ -
  ---------- -----
  ------------ -----
-

-- ------ --------- -------- ------- --- --
------------------ -
  ------ ------
  ------- ------
-
展开代码

输出

• 具有 "primary-button" 和 "secondary-button" 类的按钮将具有白色文本和蓝色背景。
• 具有 "main-header" 和 "secondary-header" ID 的标题将具有 24px 的字体大小和粗体。
• 具有 "image" 数据类型的元素将具有 200px 的宽度和 200px 的高度。