属性选择器用于选择带有特定属性或属性值的HTML元素。以下是常见的属性选择器及其用法：

  1. [attribute]
    选择带有指定属性的元素，不考虑属性值。
    示例：

    a[target] {
    color: red;
}

    选择所有带有target属性的<a>元素。

  2. [attribute="value"]
    选择带有指定属性且属性值完全匹配的元素。
    示例：

    input[type="text"] {
    background-color: yellow;
}

    选择所有type属性为text的<input>元素。

  3. [attribute~="value"]
    选择属性值中包含指定单词的元素（单词以空格分隔）。
    示例：

    [class~="highlight"] {
    border: 2px solid blue;
}

    选择class属性中包含highlight单词的元素。

  4. [attribute|="value"]
    选择属性值以指定单词开头且后面紧跟连字符-的元素。
    示例：

    [lang|="en"] {
    font-style: italic;
}

    选择lang属性值以en开头的元素，如en-us。

  5. [attribute^="value"]
    选择属性值以指定字符串开头的元素。
    示例：

    a[href^="https"] {
    color: green;
}

    选择href属性值以https开头的<a>元素。

  6. [attribute$="value"]
    选择属性值以指定字符串结尾的元素。
    示例：

    img[src$=".png"] {
    border: 1px solid black;
}

    选择src属性值以.png结尾的<img>元素。

  7. [attribute="value"]*
    选择属性值中包含指定字符串的元素。
    示例：

    [title*="example"] {
    background-color: lightgray;
}

    选择title属性值中包含example的元素。

本篇文章内容来源于：属性选择器详细说明以及案例