CSS 属性选择器

• 

  CSS [attribute]选择器

  [attribute]选择器用于选择具有指定的属性的元素。以下示例选择具有target属性的所有<a>元素：

  a[target] {
                    background-color: yellow;
                  }

  尝试一下
• 

  CSS [attribute =“value”]选择器

  [attribute="value"]选择器用于选择具有指定的属性和值的元素。以下示例选择具有target =“_ blank”属性的所有<a>元素：

  a[target=_blank] {
            background-color: yellow;
          }

  尝试一下
• 

  CSS [attribute~ =“value”]选择器

  [attribute~="value"]选择器用于选择与含有指定词的属性值的元素。以下示例选择具有title属性的所有元素，该属性包含以空格分隔的单词列表，其中一个是“flower”：

  [title~="flower"] {
            border: 5px solid yellow;
          }

  尝试一下

  注意： 上面的示例将匹配title=“flower”，title=“summer flower”和title=“flower new”的元素，但不匹配title=“my-flower”或title=“flowers”。

• 

  CSS [attribute |=“value”]选择器

  [attribute|="value"]选择器用于选择具有指定属性的元素开始的指定的值。以下示例选择具有以“top”开头的类属性值的所有元素：
  注意：值必须是一个完整的单词，可以单独使用，如class=“top”，或者后跟连字符（ - ），如class=“top-text”！

  [class|="top"] {
                    background: yellow;
                  }

  尝试一下
• 

  CSS [attribute ^ =“value”]选择器

  [attribute^="value"]选择器用于选择其属性值开始于指定的值的元素。以下示例选择具有以“top”开头的类属性值的所有元素：注意：该值不必是一个完整的单词！

  [class^="top"] {
            background: yellow;
          }
          

  尝试一下
• 

  CSS [attribute $ =“value”]选择器

  [attribute$="value"]选择器用于选择其属性值与规定值结束的元素。以下示例选择具有以“test”结尾的类属性值的所有元素：注意：该值不必是一个完整的单词！

  [class$="test"] {
            background: yellow;
          }

  尝试一下