# attribute selectors

{% tabs %}
{% tab title="📗 參考" %}

* [CSS Attribute Selectors](https://www.w3schools.com/css/css_attribute_selectors.asp)
  {% endtab %}

{% tab title="📘 手冊" %}

* [ ] MDN ⟩ [Attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
  {% endtab %}
  {% endtabs %}

| selector                | notes                                                                                                                                                                                                                            |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `[attribute="value"]`   | select elements with a specified attribute and value                                                                                                                                                                             |
| `[attribute^="value"]`  | attribute **begins** with a specified value (doesn't have to be a whole word).                                                                                                                                                   |
| `[attribute$="value"]`  | attribute **ends** with a specified value.                                                                                                                                                                                       |
| `[attribute*="value"]`  | attribute **contains** a specified value.                                                                                                                                                                                        |
| `[attribute~="value"]`  | <p>attribute value <strong>containing</strong> a specified <strong>word</strong>.</p><p>⭐️ 注意：要「<strong>整個單字」</strong>一樣才算❗️</p><p>吻合："<strong>value</strong> is", "my <strong>value</strong>"</p><p>不合："values", "my-value"</p> |
| `[attribute\|="value"]` | <p>attribute <strong>starting</strong> with the specified value.</p><p>吻合："<strong>value</strong>", "<strong>value</strong>-key" (followed by <strong>hyphen</strong>)</p><p>不合："values"</p>                                     |