属性选择器用于根据 HTML 元素的属性和值来选择元素。不同的属性选择器语法适用于各种匹配需求。让我们逐一解释每种语法，并给出相应的例子：
1. [attr]
- 选择具有指定属性的所有元素，不考虑属性值。
- 语法：
[attr] - 例子：选择所有有
name属性的元素。
CSS 选择器：<input type="text" name="username"> <input type="password" name="password"> <input type="submit">[name]- 这个选择器会选择第一个和第二个
<input>，因为它们有name属性。
- 这个选择器会选择第一个和第二个
2. [attr=value]
- 选择具有指定属性，且属性值等于指定值的元素。
- 语法：
[attr=value] - 例子：选择
name="username"的元素。
CSS 选择器：<input type="text" name="username"> <input type="password" name="password">[name="username"]- 这个选择器会选择第一个
<input>，因为它的name属性等于"username"。
- 这个选择器会选择第一个
3. [attr~=value]
- 选择具有指定属性，且属性值包含一个以空格分隔的列表，其中至少有一个值等于指定值的元素（类似于
class属性匹配）。 - 语法：
[attr~=value] - 例子：选择
class属性中包含btn的元素。
CSS 选择器：<button class="btn primary">Submit</button> <button class="btn secondary">Cancel</button>[class~="btn"]- 这个选择器会选择所有具有
btn类的按钮。
- 这个选择器会选择所有具有
4. [attr|=value]
- 选择具有指定属性，且属性值是以指定值开头的，或者等于该值，值可以用连字符（
-）后接其他内容。 - 语法：
[attr|=value] - 例子：选择
lang="en"或者lang以en-开头的元素。
CSS 选择器：<html lang="en"> <html lang="en-US"> <html lang="fr">[lang|="en"]- 这个选择器会选择前两个
<html>标签，因为lang属性等于"en"或以"en-"开头。
- 这个选择器会选择前两个
5. [attr^=value]
- 选择具有指定属性，且属性值以指定值开头的元素。
- 语法：
[attr^=value] - 例子：选择
href属性以"https"开头的链接。
CSS 选择器：<a href="https://example.com">Link 1</a> <a href="http://example.com">Link 2</a>[href^="https"]- 这个选择器会选择第一个
<a>标签，因为它的href以"https"开头。
- 这个选择器会选择第一个
6. [attr$=value]
- 选择具有指定属性，且属性值以指定值结尾的元素。
- 语法：
[attr$=value] - 例子：选择
src属性以.png结尾的图片。
CSS 选择器：<img src="image1.png"> <img src="image2.jpg">[src$=".png"]- 这个选择器会选择第一个
<img>标签，因为src以.png结尾。
- 这个选择器会选择第一个
7. [attr*=value]
- 选择具有指定属性，且属性值包含指定值的元素。
- 语法：
[attr*=value] - 例子：选择
href属性中包含example的链接。
CSS 选择器：<a href="https://example.com">Link 1</a> <a href="https://anotherexample.com">Link 2</a> <a href="https://somethingelse.com">Link 3</a>[href*="example"]- 这个选择器会选择前两个
<a>标签，因为它们的href属性中包含"example"。
- 这个选择器会选择前两个
总结
属性选择器使得我们可以根据 HTML 元素的属性及其值进行灵活、精确的选择，适用于不同的匹配需求：
[attr]：选择具有指定属性的元素。[attr=value]：选择属性值完全等于指定值的元素。[attr~=value]：选择属性值中包含指定值（通过空格分隔）的元素。[attr|=value]：选择属性值以指定值开头或等于指定值的元素（通常用于语言或其他类似属性）。[attr^=value]：选择属性值以指定值开头的元素。[attr$=value]：选择属性值以指定值结尾的元素。[attr*=value]：选择属性值包含指定值的元素。