CSS 的属性选择器

1. 属性选择器的类型

CSS 属性选择器允许根据属性值（例如 id、class、name、type 等等）选择 HTML 元素。它们提供了选择元素的灵活性和精确性，对于样式化表单元素、链接和其他带有独特属性的元素特别有用。本文将探讨各种属性选择器及其应用。

属性选择器分为几类，可以根据属性的存在、其确切值或值的一部分来选择元素。主要的属性选择器类型如下：

1. 存在属性选择器：选择包含某个属性的元素，而不考虑其值。
2. 属性值选择器：选择属性值等于指定值的元素。
3. 属性值以指定字符开头的选择器：选择属性值以某个前缀开头的元素。
4. 属性值以指定字符结尾的选择器：选择属性值以某个后缀结尾的元素。
5. 包含指定子字符串的属性选择器：选择属性值包含某个子字符串的元素。
6. 以空格分隔的属性选择器：选择属性值包含某个单词且单词由空格分隔的元素。
7. 以连字符分隔的属性选择器：选择属性值包含某个单词且单词由连字符分隔的元素。

2. 存在属性选择器 (Attribute Selector)

存在属性选择器选择包含某个属性的元素，而不考虑其值。当需要选择所有具有特定属性的元素时，该选择器非常有用。

input[type] {
  border: 1px solid black;
}

<input type="text">
<input type="password">
<input type="email">
<input>

在这个例子中，所有带有 type 属性的 <input> 元素将被应用黑色边框，而不考虑该属性的值。

3. 属性值选择器

属性值选择器选择属性值等于指定值的元素。这在需要选择具有特定属性值的元素时非常有用，例如所有文本框或在新标签中打开的链接。

    
input[type="text"] {
  background-color: #f0f0f0;
}
    
  

    
<input type="text">
<input type="password">
<input type="email">
    
  

在这里，只有文本框 <input type="text"> 会应用浅灰色背景。

4. 属性值以指定字符开头的选择器

属性值以指定字符开头的选择器会选择属性值以某个前缀开头的元素。前缀在符号 ^= 后面指定。例如，可以选择所有链接指向特定网站。

    
a[href^="https://example.com"] {
  color: green;
}
    
  

    
<a href="https://example.com/page1">链接到 example.com</a>
<a href="https://another.com">另一个链接</a>
    
  

只有第一个链接会被设置为绿色，因为它的 href 以 "https://example.com" 开头。

5. 属性值以指定字符结尾的选择器

属性值以指定字符结尾的选择器选择属性值以某个后缀结尾的元素。例如，可以选择特定格式的文件，如 .png 图片。

    
img[src$=".png"] {
  border: 2px solid blue;
}
    
  

    
<img src="image1.png" alt="图片 1">
<img src="image2.jpg" alt="图片 2">
    
  

只有扩展名为 .png 的图片会被应用蓝色边框。

6. 包含指定子字符串的属性选择器

包含指定子字符串的属性选择器选择属性值包含指定子字符串的元素。子字符串在符号 *= 后面指定。例如，可以选择指向特定站点部分的链接。

    
a[href*="section"] {
  font-weight: bold;
}
    
  

    
<a href="https://example.com/section1">链接到部分 1</a>
<a href="https://example.com/about">关于我们</a>
<a href="https://example.com/section2">链接到部分 2</a>
    
  

只有包含 "section" 的链接会被加粗。