css属性选择器中的[attr]和[attr=value]用于根据html元素的属性存在与否或具体值来选择元素。[attr]只要求属性存在，无论值为何；而[attr=value]则要求属性值必须精确匹配指定值。例如，button[disabled]会选中所有带有disabled属性的按钮，而input[type="text"]仅选中type属性为text的输入框。两者在处理表单状态、语义化属性及自定义data-属性时非常有用。使用时需注意大小写敏感（除非用i修饰符）、引号一致性及匹配逻辑差异。相比类选择器和id选择器，属性选择器更贴近html原生语义，适用于基于元素固有特性进行样式控制的场景。此外，css还提供多种进阶属性选择器：1. [attr~=value]匹配属性值包含空格分隔的词；2. [attr|=value]匹配以指定值开头并后跟连字符的属性值；3. [attr^=value]匹配以指定值开头的属性值；4. [attr$=value]匹配以指定值结尾的属性值；5. [attr=value]匹配属性值包含指定子串的元素。实际开发中需注意其特殊性（与类选择器相同）、性能影响较小但维护性问题可能较高、避免过度耦合html与css以及保持选择器简洁。规避策略包括统一属性命名规范、优先使用稳定语义属性、合理控制选择器复杂度，并在必要时使用类名代替复杂属性选择器以提升可维护性。
![CSS属性选择器实战：[attr]和[attr=value]用法](https://img.php.cn/upload/article/001/503/042/175299492837824.jpeg)
CSS属性选择器中的[attr]和[attr=value]，简单来说，它们就是让你能够根据HTML元素的属性是否存在，或者属性的具体值是什么，来精准地选择并施加样式。[attr]是看某个属性有没有，只要有，就选中；而[attr=value]则要求属性不仅存在，它的值还必须和我们指定的一模一样。这俩家伙在日常的CSS编写中，其实比你想象的要有用得多，尤其是在你需要针对特定行为或数据状态的元素进行样式控制时。
![CSS属性选择器实战：[attr]和[attr=value]用法](https://img.php.cn/upload/article/001/503/042/175299492859359.jpeg)
在使用CSS属性选择器[attr]和[attr=value]时，核心在于理解它们各自的匹配逻辑。
[attr]选择器用于匹配所有带有指定属性的元素，无论该属性的值是什么。例如，如果你想选中所有带有disabled属性的按钮，无论这个disabled属性的值是空字符串还是disabled="true"，你都可以用button[disabled]。这在处理表单元素的状态时尤其方便，比如让所有被禁用的输入框呈现灰度状态。
立即学习“前端免费学习笔记（深入）”；
![CSS属性选择器实战：[attr]和[attr=value]用法](https://img.php.cn/upload/article/001/503/042/175299492960276.jpeg)
/* 选中所有带有 'disabled' 属性的元素 */
input[disabled], button[disabled] {
opacity: 0.6;
cursor: not-allowed;
background-color: #f0f0f0;
}
/* 选中所有带有 'href' 属性的链接 */
a[href] {
color: #007bff;
text-decoration: none;
}而[attr=value]选择器则更加精确，它只匹配那些指定属性的值完全等于给定值的元素。举个例子，如果你想给所有type为text的输入框设置一个特定的边框，那么input[type="text"]就是你的选择。这里需要注意的是，属性值通常需要用引号包裹起来，无论是单引号还是双引号都可以，但最好保持一致性。值的匹配是区分大小写的，除非你使用CSS Level 4中的i修饰符（如[attr=value i]）。
/* 选中所有 type 属性值为 'text' 的 input 元素 */
input[type="text"] {
border: 1px solid #ccc;
padding: 8px;
}
/* 选中所有 data-theme 属性值为 'dark' 的元素 */
[data-theme="dark"] {
background-color: #333;
color: #f0f0f0;
}
/* 选中所有 lang 属性值为 'en-US' 的元素，不区分大小写（CSS4） */
/* p[lang="en-us" i] {
font-style: italic;
} */实际应用中，我经常用它们来处理一些自定义属性，比如data-*属性，这让我的HTML和CSS之间的关联变得更加语义化，而不是单纯依赖于类名。比如，一个data-modal-target="login"的按钮，我可以很方便地通过[data-modal-target="login"]来给它一些特殊的样式，这比给它一个class="login-modal-button"感觉上要“精准”一些。
![CSS属性选择器实战：[attr]和[attr=value]用法](https://img.php.cn/upload/article/001/503/042/175299492963621.jpeg)
这三者在CSS中都是用来选择元素的，但它们的设计哲学和使用场景差异挺大的。我个人理解，它们就像是三种不同粒度的“标签”。
ID选择器（#myId）是最独特的，它就像你的身份证号码，在一个HTML文档里应该是独一无二的。所以，当你需要选中页面上某个绝对唯一的元素，并且它的样式或行为是高度定制化、不打算复用的，ID选择器是首选。它的优先级最高，这意味着它定义的样式很难被其他选择器覆盖。但正因为其唯一性，在组件化开发中，我反而不怎么爱用ID，因为它限制了组件的复用性。
类选择器（.myClass）则更像是一类人的“职业标签”，比如“程序员”、“设计师”。一个元素可以有多个类，多个元素也可以有同一个类。这让类选择器成为最常用、最灵活的样式复用工具。它非常适合定义可复用、模块化的样式，比如按钮的样式、卡片的样式等。这是我日常工作中用得最多的选择器，因为它兼顾了灵活性和可维护性。
而属性选择器，尤其是[attr=value]，我更倾向于把它看作是基于元素“内在特性”的选择。它不依赖于额外的类名或ID，而是直接利用HTML元素本身就带有的属性信息。比如，一个input元素天生就有type属性，一个a标签天生就有href属性。当你需要根据这些“原生”或“语义化”的属性来施加样式时，属性选择器就显得非常自然。
什么时候用它们？
type, href, alt, lang等）来设置样式时。[attr]），比如所有required的输入框。我个人在使用时，会尽量让选择器与HTML的语义保持一致。比如，我不会给一个禁用的按钮加一个.disabled-button的类，而是直接用button[disabled]来选中它，因为disabled本身就是HTML的语义。这让我的CSS更“聪明”，能直接理解HTML的状态。
确实，属性选择器家族远不止[attr]和[attr=value]这么简单。CSS为我们提供了更多灵活的匹配方式，能够处理各种复杂的属性值场景。这些“进阶”用法，我觉得是真正能体现属性选择器强大之处的地方，它们让选择器能够像正则表达式一样进行模式匹配。
[attr~=value] (包含某个词的属性值)
这个选择器会匹配属性值中包含一个或多个由空格分隔的词，并且其中一个词恰好是value的元素。它对空格分隔的列表特别有用，比如HTML的class属性。
/* 选中 class 属性中包含 'button' 这个词的元素，例如 class="primary button" 或 class="button-large" */
[class~="button"] {
padding: 10px 15px;
border-radius: 4px;
}我发现这在处理多个类名时，如果某个类名代表一个通用概念，但又不想精确匹配整个类名列表时，会很有用。
[attr|=value] (以指定值开头，且后面是连字符的属性值)
这个选择器用于匹配属性值以value开头，并且后面紧跟着一个连字符-（或者就是value本身）的元素。它主要用于语言代码（如lang="en-US"）或者某种命名约定。
/* 选中 lang 属性值为 'zh' 或 'zh-CN' 等的元素 */
[lang|="zh"] {
font-family: "Microsoft YaHei", sans-serif;
}这个用法相对特定，但我偶尔会在多语言站点中遇到它。
[attr^=value] (以指定值开头的属性值)
这个是我个人比较喜欢用的一个。它匹配属性值以value开头的元素。这在处理文件路径、URL前缀或者有特定前缀的ID/类名时非常方便。
/* 选中所有 href 属性以 'https://' 开头的链接 */
a[href^="https://"] {
color: green;
}
/* 选中所有 class 以 'icon-' 开头的元素，比如 icon-home, icon-user */
[class^="icon-"] {
display: inline-block;
width: 16px;
height: 16px;
background-repeat: no-repeat;
}我经常用它来给外部链接或者特定类型的图标设置样式，非常省心。
[attr$=value] (以指定值结尾的属性值)
与^=相反，它匹配属性值以value结尾的元素。这对于根据文件扩展名来设置样式（比如所有.pdf链接）或者有特定后缀的ID/类名很有用。
/* 选中所有 href 属性以 '.pdf' 结尾的链接 */
a[href$=".pdf"] {
background: url('pdf-icon.png') no-repeat right center;
padding-right: 20px;
}*`[attr=value](包含指定值的属性值)** 这个是最宽松的匹配，只要属性值中**包含**value`字符串的任何部分，无论它在哪里，都会被选中。它非常强大，但也可能因为过于宽松而导致意外匹配。
/* 选中所有 title 属性中包含 '重要' 字样的元素 */
[title*="重要"] {
border: 2px dashed red;
}我用它的时候会比较谨慎，因为它可能匹配到一些我没预料到的地方。但如果你确定某个字符串是某个属性值的一部分，且需要针对它进行样式处理，它就很有用了。比如，在搜索结果高亮时，如果把搜索关键词作为data-*属性的一部分，就可以用它来匹配。
这些扩展的属性选择器，提供了一种非常灵活的方式来根据元素的内在属性进行样式控制，尤其是在我们不想过度依赖JavaScript来添加或移除类名，或者HTML结构本身已经包含了足够多的语义信息时。它们让CSS的选择能力变得更加精细和强大。
虽然属性选择器功能强大，但在实际项目中，我确实也踩过一些小坑，或者说，有些地方需要特别留意。
1. 特殊性（Specificity）的理解偏差
这是最常见的“坑”之一。属性选择器的特殊性是10（和类选择器一样），高于元素选择器（1），低于ID选择器（100）。这意味着如果你用div[data-id="foo"]来定义样式，而另一个地方用#someId或更具体的选择器覆盖它，可能会出现样式不生效的“错觉”。
!important（但尽量避免）。在复杂组件中，我更倾向于使用BEM或其他命名规范来管理类名，以保持特殊性扁平化，减少属性选择器的冲突。2. 性能考量（微乎其微但值得一提）
理论上，复杂的属性选择器（特别是*=这种需要遍历整个字符串的）在非常庞大、复杂的DOM结构上，可能会比简单的类选择器有轻微的性能开销。但在绝大多数现代Web应用中，这种差异是微乎其微的，几乎可以忽略不计。但如果你正在开发一个对性能极其敏感，或者DOM节点数量动辄上万的页面，这可能是一个值得考虑的因素。
3. 维护性与耦合度
当你把样式直接绑定到HTML属性上时，如果这些HTML属性的名称或值发生变化，CSS样式就会失效。这可能导致HTML和CSS之间的耦合度过高。例如，如果你的后端团队突然决定把data-status="active"改成data-state="active"，你的CSS就全失效了。
data-*属性使用规范。哪些属性是给JS用的，哪些是给CSS用的，哪些是共享的。input[type="text"]比input[data-input-type="text"]更稳定。data-*属性，这样组件的外部接口更稳定。4. 区分大小写的问题[attr=value]是区分大小写的。[type="Text"]不会匹配type="text"。这在开发中很容易被忽视，导致样式不生效。
i修饰符（[attr=value i]），但需要注意浏览器兼容性。5. 滥用导致选择器过于复杂 虽然属性选择器很灵活，但过度使用或组合过于复杂的属性选择器，会让你的CSS变得难以阅读和维护。
总的来说，属性选择器是一把双刃剑。用得好，它能让你的CSS更具表现力，更贴近HTML的语义。用得不好，它可能会带来一些维护上的麻烦。我的建议是，在理解其优缺点和潜在“坑”的基础上，根据实际项目需求，有选择、有策略地使用它们。
以上就是CSS属性选择器实战：[attr]和[attr=value]用法的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
305
收藏
