属性选择器的写法：CSS属性选择器的写法与应用指南

来源：网络作者：日期：2025-10-30 04:11:51

在CSS中,属性选择器是一种强大的功能，它允许开发者根据HTML元素的属性及其值来选择元素，无论是为表单元素添加样式，还是为动态生成的内容设置样式，属性选择器都能提供灵活的选择方式，本文将详细介绍属性选择器的写法、常见用法以及一些实用技巧。

属性选择器的基本语法

属性选择器使用方括号 [] 来定义，其基本语法如下：

[attribute]         /* 选择具有该属性的元素 */
[attribute=value]   /* 选择属性值等于指定值的元素 */
[attribute^=value]   /* 选择属性值以指定值开头的元素 */
[attribute$=value]   /* 选择属性值以指定值结尾的元素 */
[attribute*=value]   /* 选择属性值包含指定子字符串的元素 */

常见属性选择器用法

基础属性选择器 `[attribute]`

该选择器用于选择所有具有指定属性的元素,无论属性值是什么。

属性选择器的写法：CSS属性选择器的写法与应用指南

/* 选择所有带有href属性的链接 */
[href] {
  color: blue;
  text-decoration: none;
}

精确值匹配 `[attribute=value]`

该选择器用于选择属性值完全匹配指定值的元素。

/* 选择所有class为"btn-primary"的按钮 */
.btn-primary {
  background-color: blue;
  color: white;
}

以指定字符串开头 `[attribute^=value]`

该选择器用于选择属性值以指定字符串开头的元素,常用于匹配类名或ID。

属性选择器的写法：CSS属性选择器的写法与应用指南

/* 选择所有class以"nav-"开头的元素 */
[class^="nav-"] {
  font-weight: bold;
}

以指定字符串结尾 `[attribute$=value]`

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

/* 选择所有class以"-footer"结尾的元素 */
[class$="-footer"] {
  border-top: 1px solid #ccc;
}

包含指定子字符串 `[attribute*=value]`

该选择器用于选择属性值中包含指定子字符串的元素。

/* 选择所有class中包含"card"的元素 */
[class*="card"] {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

实用示例

示例1：为表单元素添加样式

/* 选择所有带有type属性的input元素 */
[type="text"] {
  border: 1px solid #ddd;
  padding: 8px;
}
/* 选择所有带有placeholder属性的textarea元素 */
[placeholder] {
  font-style: italic;
  color: #666;
}

示例2：为链接添加不同样式

/* 选择所有带有download属性的链接 */
[download] {
  background-color: #f0f0f0;
  padding: 5px 10px;
}
/* 选择所有href属性以"https"开头的链接 */
[href^="https"] {
  color: green;
}

示例3：为自定义属性添加样式

/* 选择所有带有data-category属性的元素 */
[data-category] {
  cursor: pointer;
}
/* 选择所有data-category属性值为"featured"的元素 */
[data-category="featured"] {
  border: 2px solid gold;
}