【H5 前端开发笔记】第 19 期：CSS 选择器 (4) 属性选择器详解

最新推荐文章于 2026-03-18 09:22:12 发布

原创最新推荐文章于 2026-03-18 09:22:12 发布 · 412 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

编程开发文档教程

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

属性选择器

概念: 属性选择器就是可以挑选带有特殊属性的元素标签

或者说找带有指定的属性名称或属性值的元素标签!

[属性名]

作用 : 可以根据标签元素的属性名来指定元素!

语法: 元素选择器[属性名] { ..css样式..}

案例:

<style>
    p[title]{
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>

<p title="str">这是一段话</p>
<p title="str">这是一段话</p>
<p title="str">这是一段话</p>
<p>这是一段话</p>
<p>这是一段话</p>
<p title="num">这是一段话</p>
<p title="num">这是一段话</p>
<p title="num">这是一段话</p>
<p>这是一段话</p>
<p>这是一段话</p>

[属性名=属性值]

作用: 选择含有指定属性与属性值的元素!

语法: 元素选择器[属性=属性值] (注意:属性值加不加双引号都可以,个人建议加上)

案例

<style>
    p[title="str"]{
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>

<p title="str">这是一段话</p>
<p title="str">这是一段话</p>
<p title="str">这是一段话</p>
<p>这是一段话</p>
<p>这是一段话</p>
<p title="num">这是一段话</p>
<p title="num">这是一段话</p>
<p title="num">这是一段话</p>
<p>这是一段话</p>
<p>这是一段话</p>

[属性名^=字符]

作用:选择指定元素的属性以及属性值以指定的字符内容开头的元素!

语法:元素选择器[属性名^=属性值开头字符]

注意: 这里的字符内容是属性值的开头几个字母或文字字符 ,属性值字符加不加双引号都可以!

案例

<style>
    p[title^="data"]{
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>


<p title="str">这是一段话</p>
<p title="str">这是一段话</p>
<p title="data-str">这是一段话</p>
<p>这是一段话</p>
<p>这是一段话</p>
<p title="data-num">这是一段话</p>
<p title="data-num">这是一段话</p>
<p title="num">这是一段话</p>
<p>这是一段话</p>
<p>这是一段话</p>

[属性名$=字符]

作用: 选择指定元素的属性以及属性值以指定的字符内容结尾的元素!

语法: 元素选择器[属性名$=属性值结尾字符] (属性值字符加不加双引号都可以!)

案例

<style>
    p[title$="num"]{
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>

<p title="str">这是一段话</p>
<p title="str">这是一段话</p>
<p title="data-str">这是一段话</p>
<p>这是一段话</p>
<p>这是一段话</p>
<p title="data-num">这是一段话</p>
<p title="data-num">这是一段话</p>
<p title="num">这是一段话</p>
<p>这是一段话</p>
<p>这是一段话</p>

[属性名*=字符]

作用: 选择元素中指定属性及属性值中包含指定字符的元素!

语法:元素选择器[属性名*=属性值中包含的字符]

案例

<style>
    p[title*="n"]{
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>

<p title="str">这是一段话</p>
<p title="str">这是一段话</p>
<p title="data-str">这是一段话</p>
<p>这是一段话</p>
<p>这是一段话</p>
<p title="data-num">这是一段话</p>
<p title="data-num">这是一段话</p>
<p title="num">这是一段话</p>
<p>这是一段话</p>
<p>这是一段话</p>

[属性名~=属性值]

作用: 选择指定元素中属性及属性值中包含指定单词字符的所有元素。

语法: 元素选择器[属性名~=属性值字符]{…css样式…}

注意：~=其中的属性值必须是一个独立的单词或者字符串。

案例: p标签中属性值中带有 test a可以被选中,而p标签属性值中带有testa的不能被选中!

<!--
例如 [title~=test] 中 test a可以被选中testa不能被选中
-->
<style>
    p[title~="test"]{
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>

    <p title="str">这是一段话</p>
    <p title="str">这是一段话</p>
    <p title="data-str">这是一段话</p>
    <p>这是一段话</p>
    <p>这是一段话</p>
    <p title="data-num">这是一段话</p>
    <p title="data-num">这是一段话</p>
    <p title="num">这是一段话</p>
    <p>这是一段话</p>
    <p title="data-num-str">这是一段话</p>
    <p title="test a">这是一段话</p>
    <p title="testa">这是一段话</p>

小提示:

~=其中的value必须是一个独立的单词，例如 [title~=test] 中 test a可以被选中testa不能被选中．
*=其中的value只要是值的子串就可以，例如test-a，test a和testa均可以被选中．

[属性名|=属性值]

作用: 选择指定元素中属性及属性值中必须包含整个单词或者中间有连字符的单词。

语法: 元素选择器[属性名|=属性值字符]{…css样式…}

注意：|=其中的属性值必须是选取整个单词或者中间有连字符的单词。

案例：

<style>
    p[title|="test"]{
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>

<p title="str">这是一段话</p>
<p title="str">这是一段话</p>
<p title="data-str">这是一段话</p>
<p>这是一段话</p>
<p>这是一段话</p>
<p title="data-num">这是一段话</p>
<p title="data-num">这是一段话</p>
<p title="num">这是一段话</p>
<p>这是一段话</p>
<p title="data-num-str">这是一段话</p>
<p title="test-num-str">这是一段话</p>
<p title="test a">这是一段话</p>
<p title="testa">这是一段话</p>

注意: 2个选择器的区别是

[attribute|=value]必须是选取整个单词或者中间有连字符的单词，而 [attribute^=value] 无此限制

举个栗子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>选择器区别</title>
  <style>
    /* [attribute|=value]：只匹配 完整value 或 value-xxx */
    p[lang|=en] {
      color: red; /* 只会选中lang="en"、lang="en-US"、lang="en-GB"的p标签 */
    }

    /* [attribute^=value]：只要开头是value就匹配 */
    p[lang^=en] {
      font-weight: bold; /* 会选中所有lang以en开头的p标签 */
    }
  </style>
</head>
<body>
  <p lang="en">我是lang="en" → 红色+加粗</p>
  <p lang="en-US">我是lang="en-US" → 红色+加粗</p>
  <p lang="en-GB">我是lang="en-GB" → 红色+加粗</p>
  <p lang="ennn">我是lang="ennn" → 只加粗（不是en/en-xxx，所以不红）</p>
  <p lang="zh-en">我是lang="zh-en" → 无样式（既不是en开头，也不是en/en-xxx）</p>
</body>
</html>