css3 新增的属性选择器：属性值前缀 属性值后缀 属性值包含 属性值单词 属性值分隔符

CSS3 引入了一些强大的属性选择器，这些选择器允许你基于元素的属性或属性值来选择元素。以下是 CSS3 新增的几种属性选择器及其用法：

1. **属性值前缀匹配选择器 `[attr^=value]`**
- 选择具有指定属性且其值以特定字符串开头的元素。
```css
a[href^="https"] {
color: green;
}
```
- 这个例子会选择所有 href 属性以 "https" 开头的 `<a>` 标签，并将它们的文本颜色设置为绿色。

2. **属性值后缀匹配选择器 `[attr$=value]`**
- 选择具有指定属性且其值以特定字符串结尾的元素。
```css
a[href$=".pdf"] {
background-image: url(pdf-icon.png);
}
```
- 这个例子会选择所有 href 属性以 ".pdf" 结尾的 `<a>` 标签，并为它们添加一个 PDF 图标背景。

3. **属性值包含匹配选择器 `[attr*=value]`**
- 选择具有指定属性且其值包含特定字符串的元素。
```css
[class*="icon-"] {
display: inline-block;
padding-left: 20px;
}
```
- 这个例子会选择所有 class 属性中包含 "icon-" 的元素，并为它们添加内边距和特定的显示方式。

4. **属性值单词匹配选择器 `[attr~=value]`**
- 选择具有指定属性且其值包含一个特定单词的元素，单词需用空格分隔。
```css
[title~="flower"] {
border: 1px solid pink;
}
```
- 这个例子会选择所有 title 属性中包含单词 "flower" 的元素，并为它们添加粉色边框。

5. **属性值分隔符匹配选择器 `[attr|=value]`**
- 选择具有指定属性且其值等于特定字符串或以该字符串后跟连字符 (-) 开头的元素。
```css
[lang|="en"] {
font-family: Arial, sans-serif;
}
```
- 这个例子会选择所有 lang 属性值为 "en" 或 "en-US"、"en-GB" 等以 "en-" 开头的元素，并为它们设置特定的字体。

6. **属性值大小写不敏感匹配选择器 `i` 修饰符**
- 在属性选择器的方括号后面添加 `i` 修饰符，可以使匹配不区分大小写。
```css
[data-color="red" i] {
background-color: lightcoral;
}
```
- 这个例子会选择所有 data-color 属性值为 "red"、"Red"、"RED" 等不区分大小写的元素，并为它们设置浅珊瑚色背景。

这些属性选择器使 CSS 能够更精确地选择元素，减少了对额外类名和 ID 的依赖，提高了样式的可维护性和灵活性。它们在处理动态生成的内容或无法修改 HTML 结构的情况下特别有用。