# 属性选择器

URL: https://caijiao.org/css/02-selectors/03-attribute
Source: docs/css/02-selectors/03-attribute.md
Description: 属性选择器根据HTML元素的属性及其值进行匹配，适用于无需使用类名或ID即可精准选中目标元素的场景。

属性选择器可以根据元素的属性或属性值来选中元素，是一种灵活的无类名选择方式。常见用法包括：

1. **存在某属性的元素**  

   ```css
   input[required] { border: red; }
   ````

匹配所有具有 `required` 属性的 `input` 元素。

2. **属性值完全匹配**

   ```css
   a[target="_blank"] { color: green; }
   ```

   选中所有 `target` 属性值为 `_blank` 的链接。

3. **属性值以某值开头（^=）**

   ```css
   img[src^="https"] { border: solid; }
   ```

   匹配 `src` 属性以 `https` 开头的图片。

4. **属性值以某值结尾（\$=）**

   ```css
   a[href$=".pdf"] { color: orange; }
   ```

   匹配所有链接到 `.pdf` 文件的元素。

5. **属性值包含某段文本（\*=）**

   ```css
   div[class*="box"] { padding: 10px; }
   ```

   匹配所有 `class` 中包含 `box` 字样的元素。

属性选择器适用于动态结构和第三方内容的样式控制，增强了样式表的通用性与灵活性。