属性选择器

属性选择器允许我们根据元素的属性及属性值来选择元素。这种选择器非常强大，能够实现精确的元素选择，特别适用于表单元素、链接等具有特定属性的元素。

存在属性选择器

存在属性选择器选择具有指定属性的元素，无论属性值是什么。

语法

[属性名] {
  属性: 值;
}

基本用法

/* 选择所有具有 title 属性的元素 */
[title] {
  border: 1px solid #ddd;
}

/* 选择所有具有 target 属性的链接 */
a[target] {
  color: #e74c3c;
}

/* 选择所有具有 disabled 属性的表单元素 */
input[disabled] {
  background: #f5f5f5;
  cursor: not-allowed;
}

实际应用

/* 表单样式 */
input[required] {
  border-left: 3px solid #e74c3c;
}

input[readonly] {
  background: #f5f5f5;
  cursor: not-allowed;
}

/* 链接样式 */
a[href] {
  color: #3498db;
  text-decoration: underline;
}

a[target="_blank"]::after {
  content: " ↗";
}

/* 图片样式 */
img[alt] {
  border: 2px solid #28a745;
}

img[alt=""] {
  border: 2px solid #dc3545;
}

精确属性值选择器

精确属性值选择器选择具有指定属性且属性值完全匹配的元素。

语法

[属性名="属性值"] {
  属性: 值;
}

基本用法

/* 选择所有 target 属性值为 _blank 的链接 */
a[target="_blank"] {
  color: #e74c3c;
}

/* 选择所有 type 属性值为 email 的输入框 */
input[type="email"] {
  background: url('email-icon.png') no-repeat 10px center;
  padding-left: 35px;
}

/* 选择所有 class 属性值为 highlight 的元素 */
[class="highlight"] {
  background: #fff3cd;
  padding: 10px;
}

实际应用

/* 表单输入类型 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

input[type="password"] {
  font-family: monospace;
}

/* 按钮 */
button[type="submit"],
button[type="button"],
input[type="submit"] {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 链接类型 */
a[href^="http://"] {
  color: #e74c3c;
}

a[href^="https://"] {
  color: #28a745;
}

a[href^="mailto:"] {
  color: #3498db;
}

部分匹配选择器

CSS 提供了多种部分匹配选择器，可以根据属性值的部分内容来选择元素。

以...开头的选择器

选择属性值以指定字符串开头的元素。

/* 语法 */
[属性名^="字符串"] {
  属性: 值;
}

/* 示例 */
a[href^="https://"] {
  color: #28a745;
}

img[src^="images/"] {
  border: 2px solid #007bff;
}

以...结尾的选择器

选择属性值以指定字符串结尾的元素。

/* 语法 */
[属性名$="字符串"] {
  属性: 值;
}

/* 示例 */
a[href$=".pdf"]::after {
  content: " (PDF)";
  color: #e74c3c;
}

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

包含...的选择器

选择属性值包含指定字符串的元素。

/* 语法 */
[属性名*="字符串"] {
  属性: 值;
}

/* 示例 */
a[href*="example.com"] {
  color: #9b59b6;
}

[class*="button"] {
  padding: 10px 20px;
  border-radius: 4px;
}

包含单词的选择器

选择属性值包含指定单词（用空格分隔）的元素。

/* 语法 */
[属性名~="单词"] {
  属性: 值;
}

/* 示例 */
[class~="active"] {
  background: #007bff;
  color: white;
}

[title~="warning"] {
  border: 2px solid #ffc107;
}

以连字符分隔的选择器

选择属性值以指定字符串开头，后跟连字符的元素（常用于语言代码）。

/* 语法 */
[属性名|="字符串"] {
  属性: 值;
}

/* 示例 */
[lang|="zh"] {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
}

[lang|="en"] {
  font-family: 'Arial', sans-serif;
}

实际应用示例

表单验证样式

/* 必填字段 */
input[required] {
  border-left: 3px solid #e74c3c;
}

input[required]::placeholder {
  color: #e74c3c;
}

/* 只读字段 */
input[readonly],
textarea[readonly] {
  background: #f5f5f5;
  cursor: not-allowed;
}

/* 禁用字段 */
input[disabled],
button[disabled],
select[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 邮箱输入 */
input[type="email"] {
  background: url('email-icon.svg') no-repeat 10px center;
  padding-left: 35px;
}

/* 密码输入 */
input[type="password"] {
  font-family: monospace;
  letter-spacing: 2px;
}

/* 数字输入 */
input[type="number"] {
  font-family: monospace;
}

/* 文件上传 */
input[type="file"] {
  padding: 8px;
  border: 1px dashed #ddd;
}

链接样式

/* 外部链接 */
a[href^="http://"],
a[href^="https://"] {
  color: #3498db;
}

a[href^="http://"]::after,
a[href^="https://"]::after {
  content: " ↗";
  font-size: 0.8em;
}

/* 邮件链接 */
a[href^="mailto:"] {
  color: #e74c3c;
}

a[href^="mailto:"]::before {
  content: "✉ ";
}

/* 电话链接 */
a[href^="tel:"] {
  color: #28a745;
}

/* PDF 文件 */
a[href$=".pdf"] {
  color: #e74c3c;
}

a[href$=".pdf"]::after {
  content: " (PDF)";
  font-size: 0.8em;
}

/* 图片链接 */
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
  color: #9b59b6;
}

图片样式

/* 有 alt 属性的图片 */
img[alt] {
  border: 1px solid #ddd;
  padding: 5px;
}

/* 空的 alt 属性 */
img[alt=""] {
  border: 2px solid #e74c3c;
}

/* 特定路径的图片 */
img[src^="images/"] {
  border-radius: 4px;
}

/* 特定类型的图片 */
img[src$=".png"] {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 缩略图 */
img[src*="thumbnail"] {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

属性选择器的组合使用

属性选择器可以与其他选择器组合使用：

/* 类选择器 + 属性选择器 */
.button[target="_blank"] {
  background: #e74c3c;
}

/* ID 选择器 + 属性选择器 */
#main-nav a[href^="#"] {
  font-weight: bold;
}

/* 多个属性选择器 */
input[type="text"][required] {
  border-left: 3px solid #e74c3c;
}

input[type="password"][autocomplete="off"] {
  background: #fff3cd;
}

属性选择器的性能

属性选择器的性能通常比类选择器和 ID 选择器差，但比通配符选择器好。

性能优化建议

/* 不推荐 - 过于复杂 */
a[href^="https://"][target="_blank"][rel="noopener"] {
  color: #e74c3c;
}

/* 推荐 - 添加类名 */
.external-link {
  color: #e74c3c;
}

/* 不推荐 - 在大型页面上使用 */
[href] {
  border: 1px solid #ddd;
}

/* 推荐 - 只对需要的元素应用 */
.nav-link[href] {
  border: 1px solid #ddd;
}

实际项目中的应用

用户资料表单

/* 表单容器 */
.user-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 30px;
}

/* 输入字段 */
.user-form input[type="text"],
.user-form input[type="email"],
.user-form input[type="tel"],
.user-form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 必填字段 */
.user-form input[required] {
  border-left: 3px solid #e74c3c;
}

/* 只读字段 */
.user-form input[readonly] {
  background: #f5f5f5;
  color: #666;
}

/* 提交按钮 */
.user-form button[type="submit"] {
  width: 100%;
  padding: 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.user-form button[type="submit"]:hover {
  background: #0056b3;
}

/* 重置按钮 */
.user-form button[type="reset"] {
  width: 100%;
  padding: 12px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.user-form button[type="reset"]:hover {
  background: #5a6268;
}

文档链接列表

/* 链接列表 */
.doc-links {
  list-style: none;
  padding: 0;
}

.doc-links li {
  margin-bottom: 10px;
}

/* PDF 文档 */
.doc-links a[href$=".pdf"] {
  display: inline-block;
  padding: 10px 15px;
  background: #e74c3c;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

.doc-links a[href$=".pdf"]::before {
  content: "📄 ";
}

/* Word 文档 */
.doc-links a[href$=".doc"],
.doc-links a[href$=".docx"] {
  display: inline-block;
  padding: 10px 15px;
  background: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

.doc-links a[href$=".doc"]::before,
.doc-links a[href$=".docx"]::before {
  content: "📝 ";
}

/* Excel 文档 */
.doc-links a[href$=".xls"],
.doc-links a[href$=".xlsx"] {
  display: inline-block;
  padding: 10px 15px;
  background: #28a745;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

.doc-links a[href$=".xls"]::before,
.doc-links a[href$=".xlsx"]::before {
  content: "📊 ";
}

总结

属性选择器是 CSS 中非常强大的选择器类型，它让我们能够根据元素的属性和属性值来精确选择元素：

1. 存在属性选择器：选择具有指定属性的元素
2. 精确属性值选择器：选择属性值完全匹配的元素
3. 部分匹配选择器：根据属性值的部分内容选择元素
4. 组合使用：可以与其他选择器组合使用

记住以下几点：

• 属性选择器特别适用于表单元素和链接
• 理解不同的部分匹配选择器的区别
• 注意属性选择器的性能影响
• 在复杂情况下考虑添加类名来提高性能
• 合理使用属性选择器可以提高代码的灵活性和可维护性