CSS3新增属性选择器

CSS3中新增了一些属性选择器，用于根据元素的属性值选择元素。以下是一些常用的CSS3属性选择器：

1. [attr]：选择具有指定属性的元素。
   [required] {
       border: 1px solid red;
   }

2. [attr=value]：选择属性值等于特定值的元素。
   [type="text"] {
       background-color: lightblue;
   }

3. [attr~=value]：选择属性值中包含指定词汇的元素。
   [class~="button"] {
       font-weight: bold;
   }

4. [attr|=value]：选择属性值以特定值开头的元素，可用于匹配语言代码。
   [lang|="en"] {
       color: blue;
   }

5. [attr^=value]：选择属性值以特定值开头的元素。
   [href^="https://"] {
       color: green;
   }

6. [attr$=value]：选择属性值以特定值结尾的元素。
   [src$=".jpg"] {
       border: 1px solid black;
   }

7. [attr*=value]：选择属性值中包含特定子字符串的元素。
   [title*="flower"] {
       background-color: pink;
   }

这些属性选择器可以帮助你更精确地选择和样式化文档中的元素。