属性选择器

作者：陈川阅读数：6035人阅读分类： CSS

属性选择器是CSS3中一种强大的选择器类型，允许开发者根据元素的属性或属性值来精准匹配元素。它提供了多种匹配模式，从简单的属性存在性检查到复杂的值匹配规则，极大增强了样式控制的灵活性。

基本语法与类型

属性选择器使用方括号[]包裹目标属性，基本语法结构如下：

[attribute] {
  /* 样式规则 */
}

CSS3规范中定义了7种属性选择器类型：

存在选择器：[attr]
相等选择器：[attr=value]
包含选择器：[attr~=value]
前缀选择器：[attr^=value]
后缀选择器：[attr$=value]
子串选择器：[attr*=value]
连字符选择器：[attr|=value]

存在选择器

最简单的形式是检查属性是否存在，不考虑其值：

/* 选择所有带有title属性的元素 */
[title] {
  border: 1px dashed #ccc;
}

这个选择器会匹配以下所有元素：

<img src="logo.png" title="公司标志">
<div title="说明文字">内容区块</div>

精确值匹配

使用等号进行精确值匹配时，需注意值必须完全一致（包括大小写）：

/* 匹配type属性值为"text"的input元素 */
input[type="text"] {
  background-color: #f0f0f0;
}

该选择器会精确匹配：

<input type="text">

但不会匹配：

<input type="TEXT">
<input type="text ">

包含单词匹配

波浪号~用于匹配属性值中以空格分隔的单词：

/* 匹配class属性包含"warning"单词的元素 */
[class~="warning"] {
  color: #c00;
}

有效匹配示例：

<p class="alert warning">注意内容</p>
<div class="warning-box">警告框</div> <!-- 不会匹配 -->

前缀匹配

脱字符^用于匹配属性值的开头：

/* 匹配href属性以"https"开头的链接 */
a[href^="https"] {
  padding-left: 20px;
  background: url(lock-icon.png) no-repeat left center;
}

典型应用场景：

<a href="https://example.com">安全链接</a>
<a href="http://example.com">普通链接</a> <!-- 不会匹配 -->

后缀匹配

美元符号$用于匹配属性值的结尾：

/* 匹配src属性以".png"结尾的图片 */
img[src$=".png"] {
  border: 2px solid #00f;
}

实际匹配案例：

<img src="logo.png">
<img src="icon.jpg"> <!-- 不会匹配 -->

子串匹配

星号*实现任意位置的子串匹配：

/* 匹配href属性包含"example"的所有链接 */
a[href*="example"] {
  font-weight: bold;
}

匹配范围包括：

<a href="https://example.com">
<a href="http://test.example.org">
<a href="#example-anchor">

连字符匹配

管道符|专为语言子代码或带连字符的值设计：

/* 匹配lang属性等于"zh"或以"zh-"开头的元素 */
[lang|="zh"] {
  font-family: "Microsoft YaHei", sans-serif;
}

适用情况：

<p lang="zh">简体中文</p>
<p lang="zh-CN">中国大陆</p>
<p lang="zh-TW">台湾地区</p>

组合使用技巧

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

/* 匹配class包含"btn"且type为"submit"的button元素 */
button[class~="btn"][type="submit"] {
  background: linear-gradient(#4caf50, #388e3c);
  color: white;
}

对应HTML结构：

<button class="primary btn" type="submit">提交</button>
<button class="btn" type="button">取消</button> <!-- 不会匹配 -->

大小写敏感控制

通过i标识符可实现不区分大小写的匹配：

/* 匹配data-type属性值为"feature"（不区分大小写）的元素 */
[data-type="feature" i] {
  border-left: 3px solid #ff9800;
}

匹配示例：

<div data-type="Feature">特性1</div>
<div data-type="FEATURE">特性2</div>
<div data-type="feature">特性3</div>

实际应用案例

表单样式增强

/* 为不同类型的输入框添加图标 */
input[type="email"] {
  background: url(email-icon.png) no-repeat 10px center;
  padding-left: 40px;
}
input[type="tel"] {
  background: url(phone-icon.png) no-repeat 10px center;
  padding-left: 40px;
}

链接安全提示

/* 为外部链接添加特殊样式 */
a[href^="http://"]:not([href*="mysite.com"]):after {
  content: " (外部)";
  font-size: 0.8em;
  color: #999;
}

响应式图片处理

/* 根据图片格式显示提示信息 */
img[src$=".jpg"]:after,
img[src$=".jpeg"]:after {
  content: " [JPEG图像]";
}
img[src$=".png"]:after {
  content: " [PNG图像]";
}

性能优化建议

避免过度使用：属性选择器的计算成本高于类选择器
右结合原则：尽量让选择器最右侧更具体
作用域限制：配合元素选择器使用，如div[data-widget]优于[data-widget]

/* 不推荐 */
[data-tooltip] { ... }

/* 推荐 */
button[data-tooltip] { ... }

浏览器兼容方案

对于需要支持IE8等老浏览器的场景：

/* 现代浏览器 */
[class^="col-"] {
  float: left;
}

/* IE8备用方案 */
.col-1, .col-2, .col-3 {
  float: left;
}

与CSS预处理器结合

在Sass/Less中可生成动态属性选择器：

// 自动生成间距工具类
@for $i from 1 through 5 {
  [data-pad="#{$i}"] {
    padding: #{$i * 5}px;
  }
}

编译结果：

[data-pad="1"] { padding: 5px; }
[data-pad="2"] { padding: 10px; }
/* ... */

在JavaScript中的应用

属性选择器也常用于DOM查询：

// 获取所有外部链接
const externalLinks = document.querySelectorAll(
  'a[href^="http://"]:not([href*="mysite.com"]), ' +
  'a[href^="https://"]:not([href*="mysite.com"])'
);

特殊字符处理

当属性值包含特殊字符时，需要进行转义：

/* 匹配包含括号的属性值 */
[data-id="item\(1\)"] {
  background: yellow;
}

对应HTML：

<div data-id="item(1)">特殊内容</div>