简介

[attribute=value] 选择器用于匹配具有指定属性和值的 HTML 元素。它是一种强大的选择器，允许您根据元素的属性值进行精确选择。

语法

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

其中：

• attribute 是要匹配的 HTML 属性的名称。
• value 是要匹配的属性值。

用法

[attribute=value] 选择器可以用于各种场景，例如：

• 选择具有特定类名的元素：[class=my-class]
• 选择具有特定 ID 的元素：[id=my-id]
• 选择具有特定属性值的元素：[data-type=product]
• 选择具有特定前缀的属性值：[data-type^=product]
• 选择具有特定后缀的属性值：[data-type$=product]
• 选择具有包含特定值的属性值：[data-type*=product]

示例

以下示例展示了如何使用 [attribute=value] 选择器：

HTML

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

CSS

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

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

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

兼容性

[attribute=value] 选择器得到所有现代浏览器的广泛支持。

技巧

• 使用通配符：可以使用通配符（）匹配任何属性值。例如，[data-*] 将匹配具有任何 data- 属性的元素。
• 使用正则表达式：可以使用正则表达式进行更高级别的匹配。例如，[data-type~=product] 将匹配具有包含 "product" 的 data-type 属性值的元素。
• 与其他选择器结合使用：可以将 [attribute=value] 选择器与其他选择器结合使用以创建更复杂的规则。例如，div[class=product][data-type=product-a] 将匹配具有 class="product" 和 data-type="product-a" 属性值的 div 元素。

结论

[attribute=value] 选择器是一种强大的工具，可用于根据元素的属性值进行精确选择。它提供了对 DOM 的细粒度控制，并允许您创建复杂的 CSS 规则。通过了解 [attribute=value] 选择器的工作原理，您可以提高 CSS 代码的效率和可维护性。